自动完成的jQuery ajax :用ajax实现它的缺陷

Question

我一直在我的django项目中尝试实现jquery自动完成，并且我与它一起使用ajax，但是我找不到如何从ajax调用中返回值，所以我将自动完成函数封装在ajax的成功函数中，它确实为我工作过，但是有一个bug，它如下所示

​

$( "#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>

​

场景是在输入框中键入字符时，例如(图像(这里))。

我没有得到任何建议，但如果我删除它，然后再键入相同的字符或任何字符，我得到的建议就像(图像(这里))，我的观点是，我这里缺少编程逻辑，或者简单地说，如何返回什么、哪里和哪个函数应该去哪里，所以请帮助我始终欣赏。已经非常感谢了

Answer 1

问题是，在获得自动完成数据之后，不会触发搜索事件。您可以在“成功”事件处理程序中使用search方法，如下所示：

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

  $( "#file-search" ).autocomplete( "search", this.value );
}

search的文档是这里。

几点意见：

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