Skip to main content
jquery_autocomplete

Simple Example of jQuery Autocomplete

jQuery Autocomplete is very common functionality in now days for auto-fill data, Each and every website using autocomplete suggestion on select HTML box. jQuery Autocomplete provided functionality to the user with a list of suggestions available on the select box at the time of word typed,

The user doesn’t need to type an entire word or a set of words to find options from the select box. The user can select an item from the list, which will be displayed in the input field.

Video Tutorial

If you are more comfortable in watching a video that explains about Simple Example of jQuery Autocomplete, then you should watch this video tutorial.

Simple Example of jQuery Autocomplete

This tutorial help to add jQuery Autocomplete functionality on web application using jQuery and ajax.You can also add auto suggestions using static values.

jQueryUI Autocomplete

jQueryUI provides an autocomplete widget that help to select option from available options. This jQuery tutorial let you know about add jQuery Autocomplete functionality with AJAX and without AJAX. Ajax Autocomplete is jQuery plugin which will provide autocomplete functionality on HTML input box using AJAX.

jquery_autocomplete

Ajax Autocomplete allows you to easily create autocomplete / autosuggest boxes for text input fields.He does not have any dependencies other than jQuery. Ajax Autocomplete for jQuery is freely distributable under the terms of an MIT-style license.

How to Instantiate jQuery Autocomplete

You can use Ajax Autocomplete two ways, One is calling autocomplete on jQuery object and passing method name as string literal and other is calling autocomplete on jQuery object without any parameters and then invoke desired method.

$('#autocomplete').autocomplete('disable');//option 1
$('#autocomplete').autocomplete().disable(); //option 2

Include Ajax Autocomplete CDN or Local API file

We need to include Ajax Autocomplete and jQuery library files in head section of index.html file.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.devbridge-autocomplete/1.2.27/jquery.autocomplete.min.js"></script>

I have included CDN path of jQuery and Ajax Autocomplete Api files, You can change the script path as per your local storage files.

Created HTML suggestion input box layout for Autocomplete

You need to add below HTML layout in your index.html file,

<div class="form-group col-sm-5">
  <label for="files">Select User</label>
  <input type="text" name="country" id="autocomplete">
</div>








<div>
	Selected Option : <span class="label label-default" id="selected_option"></span>
</div>




I created a suggestion input box and label to display the selected option.

Instantiate jQuery Autocomplete Using Non Ajax

We need to instantiate ajax autocomplete on HTML input field, where do you want to add auto suggestion option.You can call autocomplete() method as below,

var options = [
   { value: 'Adam', data: 'AD' },
   // ...
   { value: 'Tim', data: 'TM' }
];
$('#autocomplete').autocomplete({
	lookup: options,
	onSelect: function (suggestion) {
		$('#selected_option').html(suggestion.value);
	}
});

As you can see , I am using constant options arrays of data for suggestion. You need to add this code into head section of index.html file.

CSS Styling

We can define custom css styling for options/suggestion drop down list.

<style>
    .autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
	.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
	.autocomplete-selected { background: #F0F0F0; }
	.autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }
	.autocomplete-group { padding: 2px 5px; }
	.autocomplete-group strong { display: block; border-bottom: 1px solid #000; }
  </style> 

Example of jQuery Autocomplete with Ajax

$('#autocomplete').autocomplete({
	serviceUrl: '/autocomplete/countries',
	onSelect: function (suggestion) {
		$('#selected_option').html(suggestion.value);
	}
});

We removed lookup:option from autocomplete() and added service end points where options will fetch at the time user typed character in input box.

You can download source code and Demo from below link.

Leave a Reply

Your email address will not be published. Required fields are marked *