jQuery Autocomplete JSON example

complete examples of jQuery UI Autocomplete using JSON data

Step 1: Install the js and css files

<script src="js/jquery/jquery-1.7.1.min.js"></script>
<script src="js/jquery/jquery.ui.core.min.js"></script>
<script src="js/jquery/jquery.ui.widget.min.js"></script>
<script src="js/jquery/jquery.ui.position.min.js"></script>
<script src="js/jquery/jquery.ui.autocomplete.min.js"></script>

<link rel="stylesheet" href="js/jquery/smoothness/jquery-ui-1.8.16.custom.css"/>

Step 2: Format the JSON data

The important thing to remember when using JSON data and jQuery Autocomplete plugin is that the values of each labels must be wrapped in double quotes.

// Valid JSON data:
{"label" : "Samwise Gamgee"}

// Invalid JSON data:
{"label" : Samwise Gamgee}
<script>var data = [
		{"label" : "Aragorn"},
		{"label" : "Arwen"},
		{"label" : "Bilbo Baggins"},
		{"label" : "Boromir"},
		{"label" : "Frodo Baggins"},
		{"label" : "Gandalf"},
		{"label" : "Gimli"},
		{"label" : "Gollum"},
		{"label" : "Legolas"},
		{"label" : "Meriadoc Merry Brandybuck"},
		{"label" : "Peregrin Pippin Took"},
		{"label" : "Samwise Gamgee"}
		];
</script>

Step 3: Insert the jQuery autocomplete code

<script>
$(function() {

	$( "#search" ).autocomplete(
	{
		 source:data
	})
});
</script>

<input type="text" id="search" />

Search:

Format autocomplete items and JSON data

In the example below, each entry of the JSON array has two attributes: label and actor.

In the autocomplete code, instead of just making the label appear by default, we will append the actor name to the label value.


var data = [
		{"label":"Aragorn", "actor":"Viggo Mortensen"},
		{"label":"Arwen", "actor":"Liv Tyler"},
		{"label":"Bilbo Baggins", "actor":"Ian Holm"},
		{"label":"Boromir", "actor":"Sean Bean"},
		{"label":"Frodo Baggins", "actor":"Elijah Wood"},
		{"label":"Gandalf", "actor":"Ian McKellen"},
		{"label":"Gimli", "actor":"John Rhys-Davies"},
		{"label":"Gollum", "actor":"Andy Serkis"},
		{"label":"Legolas", "actor":"Orlando Bloom"},
		{"label":"Meriadoc Merry Brandybuck", "actor":"Dominic Monaghan"},
		{"label":"Peregrin Pippin Took", "actor":"Billy Boyd"},
		{"label":"Samwise Gamgee", "actor":"Sean Astin"}
		];

If you want to change the values that appear in the autocompletion box, you will need to override the default autocompletion formatting by using _renderItem.

$(function() {

	$( "#search" ).autocomplete(
	{
		source:data,
		select: function( event, ui ) {
			$( "#search" ).val( ui.item.label + " / " + ui.item.actor );
			return false;
		}
	}).data( "autocomplete" )._renderItem = function( ul, item ) {
		return $( "<li></li>" )
			.data( "item.autocomplete", item )
			.append( "<a><strong>" + item.label + "</strong> / " + item.actor + "</a>" )
			.appendTo( ul );
		};		

});

<input type="text" id="search" />

Search:

The new format is applied to the search input by configuring the select event parameter.

select: function( event, ui ) {
	$( "#search" ).val( ui.item.label + " / " + ui.item.actor );
	return false;
}

The new format is also applied to the autocompletion box using the line of code below with basic html formatting and javascript concatenation.

.append( "<a><strong>" + item.label + "</strong> / " + item.actor + "</a>" )