JQuery UI auto-complete with objects

Question

I am using jQuery 1.11.2 and trying to get an autocomplete widget to parse a data array. I have people in the array, Will Smith and Willem Dafo. I expected both names to be added to the drop-down list when I type Wi in the text box, but I don't get the answer. Here is a copy of the code:

<script src="js/jquery/jquery-1.11.2.js"></script> <script src="js/jquery/jquery-ui.js"></script> <link rel="stylesheet" href="js/jquery/jquery-ui.css"/> <link rel="stylesheet" href="js/jquery/jquery-ui.theme.css"/> <script type="text/javascript"> $(function() { var data = [ { "id": 1, "first_name": "Will", "last_name": "Smith", "created_at": "2015-01-27T13:09:20.243Z", "updated_at": "2015-01-27T13:09:20.243Z" }, { "id": 2, "first_name": "Willem", "last_name": "Dafoe", "created_at": "2015-01-27T13:17:23.479Z", "updated_at": "2015-01-27T13:17:23.479Z" } ]; // Below is the name of the textfield that will be autocomplete $('#search').autocomplete({ // This shows the min length of charcters that must be typed before the autocomplete looks for a match. minLength: 2, // This is the source of the auocomplete suggestions. In this case a list of names from the people controller, in JSON format. source:data, // This updates the textfield when you move the updown the suggestions list, with your keyboard. In our case it will reflect the same value that you see in the suggestions which is the person.given_name. focus: function(event, ui) { $('#search').val(ui.item.first_name); return false; }, // Once a value in the drop down list is selected, do the following: select: function(event, ui) { // place the person.given_name value into the textfield called 'select_origin'... $('#search').val(ui.item.first_name); // and place the person.id into the hidden textfield called 'link_origin_id'. $('#link_origin_id').val(ui.item.id); return false; } }).data( "ui-autocomplete" )._renderItem = function( ul, item ) { return $( "<li></li>" ).data( "ui-autocomplete-item", item ).append( "<a>" + item.first_name + "</a>" ).appendTo( ul ); // For now which just want to show the person.given_name in the list. }; }); </script> Search: <input type="text" id="search" /> 

The code is in the same html folder on the local drive. At the moment, the server is not involved. In addition, I checked the tool for checking for errors, but none are displayed, and all resources are found and loaded.

Answer 1

The problem was AutoFill could not serve as a source for its functioning.

You need to set the autocomplete source based on JSON data using

 source: function (request, response) { //data :: JSON list defined response($.map(data, function (value, key) { return { label: value.first_name, value: value.id } })); }, 

And I also removed the .data callback from the code.

See working code here

Answer 2

I managed to get it to work wonderfully as follows:

 $(document).on('ready',function(){ $(function() { var arrLinks = [ {% for u in users %} { nombres: "{{ u.names }} {{u.sur_names}}", email: "{{ u.username }}", documento: {{ u.identificationNumber }}, telefono: {{ u.phone }}, label: '{{ u.names }} {{u.sur_names}} / {{ u.username }} * Doc: {{ u.identificationNumber }} - Cel: {{ u.phone }}' }, {% endfor %} ]; $("input[name=search]").autocomplete({ source: arrLinks }).data("autocomplete")._renderItem = function(ul, item) { return $("<li>").data("item.autocomplete", item).append("<a>" + item.nombres + "</a>").appendTo(ul); }; }); }); 

Note. I work with symfony, from the controller I send the object with users, and in the view (twig) I do FOR, with which I assign the javascript object the data I need. It is important to identify in the label all the parameters for which you want to perform a search.

Demo image!

 $(document).on('ready',function(){ $(function() { var arrLinks = [ { nombres: "Fernando León", email: " [e-mail] ", documento: 10695846754, telefono: 3208123307, label: 'Fernando León / [e-mail] * Doc: 10695846754 - Cel: 3208123307' }, { nombres: "Edgar Molina", email: " [e-mail] ", documento: 736282826, telefono: 30087654637, label: 'Edgar Molina / [e-mail] * Doc: 736282826 - Cel: 30087654637' } ]; $("input[name=search]").autocomplete({ source: arrLinks }).data("ui-autocomplete")._renderItem = function(ul, item) { return $("<li>").data("ui-autocomplete-item", item).append("<a>" + item.nombres + "</a>").appendTo(ul); }; }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> <input type="text" name="search"> 

Answer 3

The working answer is with proper filtering. Filtering in the accepted answer did not work, because nothing was checked by request.term .

  var mydata = [{"id": 1, "name": "John", "age": 23}, {"id": 2, "name": "Mary", "age": 33}, {"id": 3, "name": "Richard", "age": 53}, {"id": 4, "name": "Ashley", "age": 25}, {"id": 5, "name": "Kyle", "age": 17}, {"id": 6, "name": "Samantha", "age": 29}, {"id": 7, "name": "David", "age": 43}, {"id": 8, "name": "Charles", "age": 27}, {"id": 9, "name": "Elaine", "age": 41}, {"id": 10, "name": "William", "age": 22} ]; $('#myautocomplete').autocomplete({ minLength: 2, source: function (request, response) { response($.map(mydata, function (obj, key) { var name = obj.name.toUpperCase(); if (name.indexOf(request.term.toUpperCase()) != -1) { return { label: obj.name + " (" + obj.age + ")", // Label for Display value: obj.id // Value } } else { return null; } })); }, focus: function(event, ui) { event.preventDefault(); }, // Once a value in the drop down list is selected, do the following: select: function(event, ui) { event.preventDefault(); // place the person.given_name value into the textfield called 'select_origin'... $('#myautocomplete').val(ui.item.label); // ... any other tasks (like setting Hidden Fields) go here... } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/> eg Try the string "ar" for filtering<br/> <input id="myautocomplete" type="text" placeholder="type some key string..." />