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

时间:2014-01-17 13:31:21

标签: javascript jquery jquery-ui autocomplete jquery-autocomplete

我在使用jQuery Autocomplete UI时遇到了一些问题。我有一个输入,我得到这个输入的值来进行JSON搜索,从数据库中提出建议。

如果我在输入中输入test,那么stange就是自动填充之前的打印值是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

如何删除此字母延迟?

3 个答案:

答案 0 :(得分:1)

如何填写myTextFromInput变量?

您可以针对发布的代码显示更多上下文吗?它在功能内吗?
是在$(document).ready(...)内或每次击键时调用一次吗?


您应该寻找的术语是request参数。

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

           ...
       }
 );

答案 1 :(得分: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 
};

答案 2 :(得分:1)

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