jQuery ajax with autocomplete:用ajax实现它的bug

时间:2015-06-08 13:25:37

标签: jquery ajax jquery-ui autocomplete

我一直在尝试在我的django项目中实现 jquery-ui autocomplete ,并且我使用了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>
&#13;
&#13;
&#13;

场景是输入框中的字符类型如(图像(here))

我没有得到任何建议,但如果我删除它并再次输入相同的字符或任何字符,我会得到很好的建议(图片(here)) 我的观点是,我在这里缺乏编程逻辑,或者简单地说如何返回什么,哪里以及哪些功能应该去哪里,所以请帮助我永远赞赏。 非常感谢

1 个答案:

答案 0 :(得分:0)

问题是您在获取自动填充数据后没有触发搜索事件。您可以使用search方法在您的成功&#39;事件处理程序如下:

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

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

search的文档是here

一些观察结果:

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