将jquery-ui自动完成更改为预输入js

Question

我有一个网站，其中的所有内容都是由引导程序制作的。我以前为其他项目制作了自动完成功能。现在，我要在预输入中使用此自动完成功能。我想将其集成到https://drupalize.me/tutorial/form-element-reference?p=2766

中

我所面对的唯一问题是我的ajax正在发出promise作为输出。我想知道，我们如何在Twitter Typeahead js中使用Promise源

我的jquery-ui

   $('.pickSPUser').each(function () {
          $(this)
            .prop('placeholder', 'Enter Last, First...')
            .autocomplete({
              minLength: 3,
              source: function doRestQuery(request, response) {
                sprLib.rest({
                  url: '_api/SP.UI.ApplicationPages.ClientPeoplePickerWebServiceInterface.clientPeoplePickerSearchUser',
                  type: 'POST',
                  data: JSON.stringify({
                    'queryParams': {
                      '__metadata': { 'type': 'SP.UI.ApplicationPages.ClientPeoplePickerQueryParameters' },
                      'AllowEmailAddresses': true, 'AllowMultipleEntities': false, 'AllUrlZones': false,
                      'MaximumEntitySuggestions': 20, 'PrincipalSource': 15, 'PrincipalType': 1,
                      'QueryString': request.term
                    }
                  })
                })
                  .then(function (arrData) {
                    if (arrData && arrData.length > 0) {
                      var results = JSON.parse(arrData[0].ClientPeoplePickerSearchUser);
                      if (results.length > 0) {
                        response($.map(results, function (item) { return { label: item.DisplayText, value: item.EntityData.SIPAddress } }));
                      }
                    }
                  })
                  .catch(function (strErr) { console.error(strErr); })
              },
              select: function (event, ui) {
                var elePickerId = event.target.id;
                sprLib.user({ email: ui.item.value }).info().then(function (objUser) { $('#' + elePickerId).val(objUser.Id) });

                // Update UI: Hide text input, show person box
                $(event.target).hide().after(
                  '<div id="PP' + elePickerId + '" class="px-2 py-1 pt-pickSPUser ui-state-default ui-corner-all addHoverEffectDone" style="display:inline-block">'
                  + '    <span class="pt-pickSPUser-person-cntr"><span>' + ui.item.label + '</span></span>'
                  + '    <span class="pl-2">'
                  + '      <a href="javascript:" onclick="$(\'#' + elePickerId + '\').show().text(\'\').val(\'\'); $(\'#PP' + elePickerId + '\').remove();">'
                  + '      <i class="fa fa-times-circle" style="color:red; font-size:125%;" title="remove"></i></a>'
                  + '    </span>'
                  + '</div>'
                );
              }
            });
        });