jQuery .val() Not Actually Changing Value

Question

UPDATE: I feel like I may have left out a key piece of information... The column type is a Person or Group type. I tried with a single line of text and it works just fine. Doesn't register as empty.But for other entries/pre-filled inputs need to use the Person or Group column to determine other inputs. Working with metadata

I have a SP list where for my first column, I am having the form autofill the User using an AJAX.

It populates the field with the correct value no problem. My issue is when you can see the value that has been automatically placed there, and hit submit for the form, it still reads the field as blank and tells me "You cannot leave this blank".

You see the value there, but it is kind of pushed in the left corner of the text box, hidden beside the input boxes default Placeholder text. I am wondering if that also could maybe be causing an issue? Is it possible to hide the placeholder text?

If I click the text box, and press any key (Enter/space/etc.) then it notices the value automatically inserted.

Before this gets marked as a duplicate, I have done my due diligence searching through posts and threads and have found similar posts with this issue, but the solution does not work. Like this post here: val() doesn't trigger change() in jQuery

Here is my call and appending of the information:

$(function(){
    $.ajax({
        url: webUri + "/_api/sp.userprofiles.peoplemanager/GetMyProperties",
        type: "GET",
        headers: {
            "Accept": "application/json; odata=verbose"
        },
        success: function(dataCurrentUser){
            console.log(dataCurrentUser)
            $("[title='User']").val(dataCurrentUser.d.AccountName).keyup().change();
        }
    })
})

Answer 1

My test code for your reference:

<script>
  $(function () {
    $.ajax({
      url: _spPageContextInfo.webAbsoluteUrl + "/_api/sp.userprofiles.peoplemanager/GetMyProperties",
      type: "GET",
      headers: {
        "Accept": "application/json; odata=verbose"
      },
      success: function (dataCurrentUser) {
        console.log(dataCurrentUser)
        var ppTitle = "people";
        //$("[title='people']").val(dataCurrentUser.d.DisplayName).keyup().change();
        var _PeoplePicker = $("div[title='" + ppTitle + "']");
        var peoplePickerEditor = _PeoplePicker.find("[title='" + ppTitle + "']");
        var _PeoplePickerTopId = _PeoplePicker.attr('id');
        peoplePickerEditor.val(dataCurrentUser.d.DisplayName);
        var ppobject = SPClientPeoplePicker.SPClientPeoplePickerDict[_PeoplePickerTopId];
        ppobject.AddUnresolvedUserFromEditor(true);
      }

    })
  })
</script>

Blog reference: People Picker Field Actions In SharePoint Using JavaScript (JSOM)

Updated:

<script>
    $(function () {
        SP.SOD.executeFunc('clientpeoplepicker.js', 'SPClientPeoplePicker', function () {
            $.ajax({
                url: _spPageContextInfo.webAbsoluteUrl + "/_api/sp.userprofiles.peoplemanager/GetMyProperties",
                type: "GET",
                headers: {
                    "Accept": "application/json; odata=verbose"
                },
                success: function (dataCurrentUser) {
                    console.log(dataCurrentUser)
                    var ppTitle = "people";
                    //$("[title='people']").val(dataCurrentUser.d.DisplayName).keyup().change();
                    var _PeoplePicker = $("div[title='" + ppTitle + "']");
                    var peoplePickerEditor = _PeoplePicker.find("[title='" + ppTitle + "']");
                    var _PeoplePickerTopId = _PeoplePicker.attr('id');
                    peoplePickerEditor.val(dataCurrentUser.d.DisplayName);
                    var ppobject = SPClientPeoplePicker.SPClientPeoplePickerDict[_PeoplePickerTopId];
                    ppobject.AddUnresolvedUserFromEditor(true);
                }

            })
        })
    });

</script>

Test result: