jQuery 自动完成 UI - 真的很奇怪的 1 个字母延迟

Question

我在jQuery自动完成UI方面遇到了一些问题。我有一个输入，我得到这个输入的值来进行 JSON 搜索，从数据库中建议东西。

如果我在输入中输入 test，则在自动完成之前打印的值test，但是当我在自动完成中打印它时，该值tes .换句话说，我在打开并使用自动完成功能进行搜索时有 1 个字母的延迟。

我的代码（已编辑）：

input.on('keyup propertychange paste', function(event){
    console.log("Inserted: " + myTextFromInput);
    input.autocomplete({
        delay: 0,
        minLength: 0,
        disabled: false,
        source: function(request, response) {
            // I need this value in my code
            originalValue = input.val();
            // Printing the current value of this variable
            console.log("Searched: " + myTextFromInput);
            if (myTextFromInput != null){
                // Remove all "?" from this string
                term = myTextFromInput.replace('?','')
                // Call the method to search in database
                populate(term, response)
                // Filtering
                result = $.ui.autocomplete.filter(result, request.term)
                // Prevent a lot of "loading" items
                for (var i in result){
                  if (result[i].type === "loading"){
                    var deleteItem = result.indexOf(i)
                    result.splice(deleteItem, 1);
                  }
                } 
                // Add item "loading" to array
                var item = {};
               item.type = 'loading';
               item.label = "Loading..";
               item.value = "";
               result.push(item);
            }
        } 
    })
    var populate = function(term, response) {
        $.getJSON(
          'text.json', // Rails, you don't need to understand
          {search: term},
          function(json) {
            var result = [];
            $.each(json, function(key, value) {
              var item = {};
              item.type = ' ';
              item.label = value.name;
              item.value = value.name;
              result.push(item);
            }) //END EACH
            var item = {};
            item.type = "noneResult";
            item.label = "Sent us your suggestion ('" + term + "')."; 
            item.value = term;
            result.push(item)
            response(result);
          }
        ); //END FUNCTION 
    };
});

这是我从控制台获得的内容，例如：

>> Inserted: myAwesomeTest
>> Searched: myAwesomeTes

我该怎么做才能消除这封信的延迟？

Answer 1

console.log("Inserted: " + myTextFromInput);
input.autocomplete({
delay: 0,
minLength: 0,
disabled: false,
source: function(request, response) {
      // I need this value in my code
      originalValue = input.val();
      // Printing the current value of this variable
      console.log("Searched: " + myTextFromInput);
      if (myTextFromInput != null){
        // Remove all "?" from this string
        term = myTextFromInput.replace('?','')
        // Call the method to search in database
        populate(term, response)
        // Filtering
        result = $.ui.autocomplete.filter(result, request.term)
        // Prevent a lot of "loading" items
        for (var i in result){
          if (result[i].type === "loading"){
            var deleteItem = result.indexOf(i)
            result.splice(deleteItem, 1);
          }
        } 
        // Add item "loading" to array
        var item = {};
        item.type = 'loading';
        item.label = "Loading..";
        item.value = "";
        result.push(item);
      }
} 
})
var xhr;
var populate = function(term, response) {
    if(xhr && xhr.readyState != 4){
        xhr.abort();
    }

    xhr = $.getJSON(
      '<%= my_path %>.json', // Rails, you don't need to understand
      {search: term},
      function(json) {
        var result = [];
        $.each(json, function(key, value) {
          var item = {};
          item.type = ' ';
          item.label = value.name;
          item.value = value.name;
          result.push(item);
        }) //END EACH
        var item = {};
        item.type = "noneResult";
        item.label = "Sent us your suggestion ('" + term + "')."; 
        item.value = term;
        result.push(item)
        response(result);
      }
    ); //END FUNCTION 
};

Answer 2

在编写自己的提前输入搜索时，我遇到了类似的问题 - 当我使用 keydown 时，我得到了一个字母的延迟，但是当使用键时，它按预期工作。

Answer 3

你如何填充你的myTextFromInput变量？

你能展示更多关于你发布的代码的背景吗？它是在函数内部吗？
它是在$(document).ready(...)内调用一次，还是在每次击键时调用？

---

您应该寻找的术语是request论点。

input.autocomplete({
       ...
       source: function(request, repsonse) {
           // Remove all "?" from this string
           var term = request.term;
           term = term.replace('?','');
           ...
       }
 );