0

这是我的代码：

$("#hifind-find").keyup(function(){

  var val = $(this).val();

  if (val.length > 1) {
    var posturl = '/hifind/jquery_ui/autocomplete/'+val;

    $.post(posturl, function(r) { 

      $("#hifind-find").autocomplete({
        source: r,
        delay: 50,
        minLength: 2
      });

      $("#hifind-find").bind('autocompleteselect', function(){
        alert('test');
      });

    }, "json");
  }

});

我在#hifind-find 字段中键入一个字母。正如预期的那样，没有任何反应，因为 val 还没有大于 1。我键入第二个字符。正如预期的那样，帖子触发并且萤火虫中的响应是我所期望的。但是 jquery ui 插件不显示字段下方的匹配项。如果我然后退格一次，然后再次输入第二个字符，则帖子会再次触发，这一次会显示选项。结果总是在连续第二次进行相同的搜索时显示。所以...

  1. ba（未提供选项）
  2. 退格两次，然后...
  3. ba（“banana”作为选项提供，“babe ruth”等）。

但是，如果我重新加载，然后...

  1. ba（没有提供）
  2. ap（没有提供）
  3. ba（没有提供）
  4. ap（什么都没有，依此类推，直到我连续两次进行相同的搜索）

我可以在 firebug 中看到回调的响应每次都是相同的，并且包含正确的数据。

想法？

4

4 回答 4

1

仅在第二次键入后，您才将组件转换为自动完成。

这是没有意义的——为什么不直接关注他们的演示呢？这比你做的要容易得多。

于 2012-06-01T23:12:58.403 回答
1

您的问题是 keyup 事件不等待 AJAX 返回并执行回调函数。keyup 事件在自动完成源包含任何数据之前完成。当您第二次执行此操作时，源已从先前的 AJAX 调用中填充，因此它可以工作（有点）。

于 2012-06-01T23:19:04.913 回答
1

你做错了。您应该为自动完成搜索字段提供回调，而不是自己绑定到 keyup。这样，自动完成将进行缓存，而这不适合您。

看到这篇文章：http: //jqueryui.com/demos/autocomplete/#remote-with-cache

关于如何更好地使用自动完成器。

在您的示例中，它看起来像这样：

      $("#hifind-find").autocomplete({
        source: function(request, response) {
          var posturl = '/hifind/jquery_ui/autocomplete/'+request.term;
          $.post(posturl, function(data) { 
             response(data);
          }, "json");
         },
        delay: 50,
        minLength: 2
      });

      $("#hifind-find").bind('autocompleteselect', function(){
        alert('test');
      });

我建议您按照我链接到的帖子中的描述添加一个缓存。

于 2012-06-01T23:21:43.973 回答
0

我想这是因为它首先需要被填充，然后它就会准备好获取字符，所以你为什么不尝试在它第一次获取字符时填充它，所以在第二个字符之后它会准备好...

这段代码：

val.length > 1

应该：

val.length > 0

另外，我认为为每个按下的键调用一个帖子并不是一个好主意，它应该第一次获得帖子，以便它可以填充自动完成对象，然后它应该使用该对象......

于 2012-06-01T22:59:00.890 回答