2 demos of auto-complete jQuery light weight plug-in

The auto-complete plug-in

In the series of jQuery UI components, I explained how you can use the auto complete by using a few lines of code after including the jQuery UI library.

In this tutorial, I am going to show you a light-weight plug-in which minified size is only 4Kb. For that, you simply need to create an input text field, give it a class name and initiate in the <script> section and that text field will act as auto-complete.

Inside the <script> section of jQuery code, you will provide the choices or terms to appear as users start typing the letters or specify a data source. Let me show you by demos that how easy it is to create and integrate auto complete into your web page.

A demo of jQuery auto-complete plug-in

In this example, a number of programming languages are used as choices for the auto complete field. Enter any letter like P, a, jav etc. to auto-complete and suggestions appear:

jQuery auto complete

See online demo and code

In the markup section, you can see an input type “text” is given a class name which is used in the <script> part as well for initiating the auto complete plug-in with certain options.

The style of the auto complete is specified in the <style> part that also specifies the color of matched characters as list appears.

Just above the </body> tag, place the libraries of jQuery and plug-in JS file:

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>

<script src=”js/auto-complete/jquery.auto-complete.js”></script>

After that comes the jQuery code section where you may specify the options of auto-complete like choices, suggestions etc.

See the complete code in the demo page.

Changing the color of matched characters demo

The default color used is blue for the matched characters in the suggestion list. You may change this by modifying the CSS in the <style> section under the <head> tag. Along with this, the background color of the selected suggestion is also changed in this demo.

jQuery auto complete

See online demo and code

The data sources while using this plug-in

The plug-in allows using different data sources for the choices. In above examples, only static or pre-defined set of choices were used in the <script> part. These choices are contained in an array, for example:

 

In real time applications, you may use AJAX based calls that gets the data from a database, text files or other sources.

To learn more about working with other data sources and options, go to plug-in demo and documentation page here.