jQuery UI autocomplete with objects

Question

I'm using jQuery 1.11.2 and trying to get the autocomplete widget to parse a data array. I have to people in the array, Will Smith and Willem Dafoe. I expected to see both of the names be added to the dropdown list when I enter Wi in the text field, yet I get no response. 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 all in a single html folder on the local drive. No server is involved at this point. Also, I've checked the inspect element tool for errors, but none are shown and all resources are found and loaded.

Community · Accepted Answer · 2020-06-20 09:12:55Z

32

The problem was Autocomplete couldn't render the source for its functioning.

You need to set the source of the autocomplete based on the JSON data present 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 the working code here

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jan 27, 2015 at 18:16

Runcorn

5,2245 gold badges37 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

thegunmaster Over a year ago

This doesn't actually seem to filter the data list though, if I type 'em' I get both values.

victommasi Over a year ago

This one doesn't filter the data properly.

gene b. Over a year ago

It doesn't filter properly. Don't provide examples that don't work.

Tyson Swing Over a year ago

This doesn't actually work. You need to provide a way to filter otherwise it is technically not "autocomplete".

Shivam Over a year ago

After this code after it works

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... 		}

gene b. · Accepted Answer · 2019-05-25 22:05:32Z

Working answer - with correct filtering. The filtering in the accepted answer wasn't working because nothing was being checked against 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"/>

e.g. Try the string "ar" for filtering<br/>
<input id="myautocomplete" type="text" placeholder="type some key string..." />

Fernando León · Accepted Answer · 2017-05-22 16:43:08Z

I have managed to make it work wonderfully in the following way:

$(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 am sending an object with users and in the view (twig) I make a FOR with which I assign the javascript object the data I need. It is important to define in the label all the parameters for which you want to search.

Demo image!

$(document).on('ready',function(){
      $(function() {
        var arrLinks = [
          {
            nombres: "Fernando León",
            email: "[email protected]",
            documento: 10695846754,
            telefono: 3208123307,
            label: 'Fernando León / [email protected] * Doc: 10695846754 - Cel: 3208123307'
          },
          {
            nombres: "Edgar Molina",
            email: "[email protected]",
            documento: 736282826,
            telefono: 30087654637,
            label: 'Edgar Molina / [email protected] * 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">

Tyson Swing · Accepted Answer · 2020-04-23 07:45:11Z

Here is a working example that performs the autocomplete action:

source: function(request, response) {
                if (!request || request.term.length < 2)
                    return;
                var term = request.term.toLowerCase();
                var r = $.grep(
                    myObjectArray,
                    function(v, i) {
                        return (v.Name.toLowerCase().indexOf(term) >= 0);
                    }).map(function(v, i) {
                    return {
                        label: v.Name,
                        value: v.Name,
                        data: v  // in case you need the data from object array
                    }
                });
                response(r);
            }

Collectives™ on Stack Overflow

jQuery UI autocomplete with objects

4 Answers 4

See the working code here

5 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

See the working code here

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related