搜索在jQuery自动完成中不起作用

Question

我正在使用JQuery自动完成功能。 数据源是动态的。 使用字符（例如alex）进行搜索时，它将返回所有数据。 我的代码是

 $('#autocomplete').autocomplete({ position: { my: "right top", at: "right bottom" }, source: function(request, response) { $.ajax({ type: "POST", url: apiurl + "apiv2/getUsers", data: { cust_id: localStorage.getItem("cust_id"), user_type: $("#to_role").val() }, success: function(data1) { var parsedJson = $.parseJSON(data1); response($.map(parsedJson.response.data, function(item) { return { label: item.name, value: item.id } })); } }); }, select: function(event, ui) { $('#searchval').val(ui.item.value); $('#autocomplete').val(ui.item.label); return false; // Prevent the widget from inserting the value. }, focus: function(event, ui) { $("#autocomplete").val(ui.item.label); return false; // Prevent the widget from inserting the value. }, }); $('#autocomplete').on('autocompleteselect', function(e, ui) { getUsersData(ui.item.value); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//code.jquery.com/jquery-1.12.4.js"></script> <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"> <input id="autocomplete" class="form-control" placeholder="Select User"> <input type="hidden" id="searchval" name="searchval" class="form-control"> 

我必须显示搜索到的确切数据。 如何解决呢？ 请帮我。

提前致谢

Answer 1

如果您的api服务器没有过滤器选项，则需要在本地实现

 if (!RegExp.escape) { RegExp.escape = function(value) { return value.replace(/[\\-\\[\\]{}()*+?.,\\\\\\^$|#\\s]/g, "\\\\$&") }; } //to mock the ajax response var parsedJson = { response: { data: [{ id: 1, name: 'Abc' }, { id: 2, name: 'cde' }, { id: 3, name: 'efg' }, { id: 4, name: 'ghi' }, { id: 5, name: 'jkl' }, { id: 6, name: 'aFZ' }] } } $('#autocomplete').autocomplete({ position: { my: "right top", at: "right bottom" }, source: function(request, response) { //replace the contents of the ajax success handler to do local filter var regex = new RegExp(RegExp.escape(request.term), "i"); var recs = $.grep(parsedJson.response.data, function(obj) { return regex.test(obj.name) }); response($.map(recs, function(item) { return { label: item.name, value: item.id } })); }, select: function(event, ui) { $('#searchval').val(ui.item.value); $('#autocomplete').val(ui.item.label); return false; // Prevent the widget from inserting the value. }, focus: function(event, ui) { $("#autocomplete").val(ui.item.label); return false; // Prevent the widget from inserting the value. }, }); 

 <script src="//code.jquery.com/jquery-1.12.4.js"></script> <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"> <input id="autocomplete" class="form-control" placeholder="Select User"> <input type="hidden" id="searchval" name="searchval" class="form-control"> 

注意：这可能是一个昂贵的实现，因为您要获取每个事件的所有内容，因此您可以尝试在本地本地缓存ajax响应的响应以提高性能