search is not working in jquery autocomplete

Question

I am using JQuery autocomplete. The data source is dynamic. While searching with a character (ex: alex), it returns all datas. My code is,

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

I have to display the exact data what I have searched for. How to resolve this? Please help me.

Thanks in advance

Answer 1

If your api server does not have a filter option then you need to implement it locally

 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"> 

Note: This could be a costly implementation as you are fetching all the contents on every event, you could try to locally cache the response of the ajax response locally to improve performance