搜索在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響應的響應以提高性能