EasyAutocomplete - 每个keyup

Question

我有一个输入框，人们应该输入城市名称，它应该动态地自动完成，通过向API发送他们输入的内容，在后端将其与当前可用的作业相匹配，以及通过ajax发回一个结果数组，然后在EasyAutocomplete插件中动态更新选项数据数组。

以下是代码：

$(function () {
    var minlength = 3;
    $(document).on('keyup','#mainSearch2',function( ) {
        var that = this,
        inputVal2 = $("#mainSearch2").val();

        if (inputVal2.length >= minlength ) {
            if (searchRequest != null) 
                searchRequest.abort();
            searchRequest = 
            $.ajax({
                  type: "POST",
                  url: 'myurltotheapi',
                  data: {
                    apiKey: "myapikey", // required
                    city: inputVal2,
                    page: 0, // optional, which page of the results, starts at "0", defaults to "0"
                    perPage: 20 // optional, results per page, defaults to "20"
                  },
                  success: function (apiResponse2){
                      if (inputVal2==$(that).val()) {
                    //Receiving the result of search here
                        options = {data: []};
                        options.data = apiResponse2.locations.map(function (el) {
                          return el.city+", "+el.state;
                        });
                        $("#mainSearch2").easyAutocomplete(options);
                     }
                    }
        });
        }
    });
});

所以当前发生的事情是，在第三个字符后的每个按键行程中，输入下的自动完成列表会将自身刷新为正确的值，但是在显示结果后，整个窗口会在一瞬间消失。输入框也会失去焦点，因此您必须手动点击，才能输入更多内容（但是您无法选择任何简单的自动完成结果，因为它们会如此快速地消失，并且仅在下一次按键时出现一瞬间）在chrome dev工具中，＆＃34; .easy-autocomplete＆＃34; div类看起来像被删除并再次添加。

我想知道是否有更好的方法可以做到这一点，没有所有这些关键字，EasyAutocomplete是否支持某种方式在每次击键时动态发送值并将内容从API结果拉到选项。数据阵列＆amp;应用它而不会失去对输入框和消失的easyautocomplete结果窗口的关注。

谢谢！

Answer 1

以下是答案：

$(function() {
    $('#mainSearch2').easyAutocomplete({
    url: 'myurl',
    ajaxSettings: {
      dataType: "json",
      method: "POST",
      data: {
        apiKey: "myapikey"
      }
    },
    listLocation: "suggestions",
    preparePostData: function(data) {
        data.query = $('#mainSearch2').val();
      return data;
    },
    requestDelay: 400
  });
});