The auto-complete plug-in
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:
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:
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.
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.