带有自动完成功能的jQuery ajax:用ajax实现它的bug

Question

我一直在尝试实现jquery-ui自动完成在我的django项目，我使用它的ajax，但我无法找到如何从ajax调用返回值，所以我包装的自动完成函数内的ajax的成功函数它确实为我工作，但有一个错误，它是如下

$( "#file-search").keyup(function() {
  $.ajax({
    type: 'GET',
    url: "/admins/",
    dataType: "json",
    data: { keyword : this.value },
    success: function( data ) {
		var availableTags;
		availableTags = data;
		$(function() {
		  $( "#file-search" ).autocomplete({
		    source: availableTags
		});
      });
    },
	error: function() {}
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

这种情况是在输入框中输入一个字符，如(image (here))

我没有得到任何建议但是如果我删除它然后再次输入相同的字符或者任何字符我得到的建议都很好，比如(image (here))我的观点是，我在这里缺乏编程逻辑，或者简单地说，如何返回什么，在哪里，哪个函数应该去哪里，所以请帮助我总是感激。Big Thanks Already

Answer 1

问题是在获得自动完成数据后没有触发搜索事件。您可以在'success'事件处理程序中使用search方法触发is，如下所示:

success: function(data) {
  $( "#file-search" ).autocomplete({
    source: data
  });
  $( "#file-search" ).autocomplete( "search", this.value );
}

search的文档在这里。

几点观察:

1. 你在每次击键时都要求服务器提供JSON。在实际环境中，您不希望到服务器进行那么多次往返。我建议构建并发送一个包含所有字母补全的压缩JSON到客户端。您可以推迟此操作，直到用户关注搜索字段或其他内容。
2. 你在代码中选择了两次'#file-search'，如果你添加了我的行，则选择了三次。你只需要做一次。
3. 成功事件处理程序的前两行是多余的。
4. 我不熟悉jqui，但似乎在每次击键时初始化元素上的自动完成也不是一个好主意。试着看看你是否能避免重复。