如何在Ajax中使用实现自动完成插件？

Question

我试图与我的ajax调用一起使materializecss自动完成插件工作，以便根据在输入字段上键入的内容动态加载数据。

我的ajax请求在一个keydown事件中被调用。提取的所有数据都会自动推送到键/值对象数组中。

然后，我将自动完成功能放在ajax的成功函数中，键“数据”的值是之前建立的对象数组。

看来我的方法不错，但是当我在浏览器中进行测试时，每次我键入内容时，建议下拉列表都会按预期显示结果，但不是每次按键后都会更新，而是另一个下拉列表与上一个重复，并且所以...

因此，这就是我的问题：如何避免下拉建议列表重叠，而是在每次按下键时使它重新显示？

感谢您的帮助。

var dat = {};
	$('input').on('keydown',function(e){
		var d = {

         "query": {
                         "prefix": {
                            "body": e.target.value
                         }
                     }

        }; 
	
		 $.ajax({
        url:'https://xxxxxxxxxxxxxxx.eu-west-1.es.amazonaws.com/xxxxxxxxxxxxx',
        type:'POST',
        contentType : "application/json",
        crossDomain : true,
        data:JSON.stringify(d),
        dataType:'JSON',
        async:true,
        success: function(da){
			
			var c = da.hits.hits.length;
			for(var i = 0; i < c; i++){
				dat[da.hits.hits[i]._source.body] = null;
			}
			
		  $("input").autocomplete({
	 data : dat
	 
		
        },
        error: function(jqXHR, errorStatus, errorThrown){
          console.log(jqXHR);
          console.log(errorStatus);
          console.log(errorThrown);
        }

       }) 
		

Answer 1

您的autocomplete()函数缺少选项列表对象的右括号、函数本身的右括号以及后面需要的分号。尝试修复这些问题，看看会得到什么：

    success: function(da){          
        var c = da.hits.hits.length;
        for(var i = 0; i < c; i++){
            dat[da.hits.hits[i]._source.body] = null;
        }
        $("input").autocomplete({
            data : dat
        });  <----HERE
    },

好的。您已经修复了括号，但问题仍然存在。首先，我要说的是，我不清楚为什么每次用户按下一个键时您都试图用新数据重新初始化自动完成小部件。我会在打开页面时初始化它，然后如果数据发生更改，我会重新初始化它。可用的选择不会因为用户按键而改变。

但除此之外：看看文档，它非常粗略，并且您已经完成了它告诉您要做的事情。它没有解决如何使用新数据重新初始化现有小部件。在重新初始化之前，您可能必须找到一种方法来删除以前的列表。以下是他们对自己的小部件的评价Select：

如果您想更新选择中的项目，只需在编辑原始选择后重新运行上面的初始化代码即可。或者您可以使用下面的此功能销毁材质选择，然后创建一个新的选择。

也许这也适用于autocomplete小部件，但他们只是未能记录它。所以，我会先尝试这个：

        $("input").autocomplete("destroy")
        .autocomplete({
            data : dat
        });

销毁现有的自动完成功能，然后使用新数据重新初始化它。如果这不起作用（他们没有说他们支持destroy()自动完成的方法，但在尝试之前你永远不会知道）那么你需要深入研究 DOM，找到保存数据的元素，然后在调用函数之前编写代码将其删除autocomplete()。如果失败，那么您可能会考虑使用 jquery-ui 自动完成功能，因为使用它的人比您正在使用的人多得多，并且您可以获得更好的帮助。