Searching Data From JSON Using JQuery UI Autocomplete Not Working

How can I use JQuery UI autocomplete using fetched json data? It's not working on mine. I use this example http://jqueryui.com/autocomplete/, but instead of hard-coded data I fetc

Solution 1:

The jQuery UI autocomplete expects either an array of strings, for example

["John Smith", "Juan dela Cruz"]

Or an array of objects having label and valueproperties, for example:

[ { label: "name", value: "John Smith" }, { label: "name", value: "Juan dela Cruz" }... ]

In case if your data source is not directly sending data in this format, you can pass a function to the source option, in which you can retrieve data from the data source and modify it accordingly.

The function receives two arguments:

• A request object with single termproperty whoes value is the user input
• A callback function to which you should pass the data in correct format.

Try something along

$(function() {
  $( "#search" ).autocomplete({
   source: function(request, response){
     $.ajax("localhost/myproject/output/names",{ // retrieve the data
          //ajax settings
         success: function(data){
            var matches = $.map(data,function(item){ // create an array of strings

               // find the matching items manually in insert to the array
               if(item.fullname.indexOf(request.term)>=0)
                 return item.fullname;
            });
            response(matches); // pass the results to response callback
         }
     });
   }
  });
});

---

Side note: The code is not tested and it is just for giving a broad overview.