JQuery UI Autocomplete

autocomplete with menu JQuery autocomplete helps user in picking up matching keyword while entering characters into the auto complete text box.
Autocomplete demo with Array variable as source
Autocomplete demo to show database record details on selection

Search for Pin code and other details of an Indian location by using autocomplete with database as source
Autocomplete Search

  • JQuery UI Autocomplete - Array Source Part I

Displaying an auto complete box

<input id=auto_c>
$(document).ready(function() {
$( "#auto_c" ).autocomplete({
  source: [ "PHP", "JQuery", "JavaScript", "HTML", "ASP",
	"MySQL","Access","Excel","Dot Net" ]
To which element we can append the menu. Here is the code
$( '#auto_c' ).autocomplete({
appendTo: "#my_element"
To read appended element
var append_element =
	$( "#auto_c" ).autocomplete( "option", "appendTo" );
To set the appendTo option
$( "#auto_c" ).autocomplete( "option", "appendTo", sel );
// sel is the variable 
Type : Boolean
Default value false

Focus on first item ( of menu ) if set to True. Here is the code
$( '#auto_c' ).autocomplete({
autoFocus: true
To read status of autoFocus
var status_used =
	$( "#auto_c" ).autocomplete( "option", "autoFocus" );
To set value for autoFocus
$( "#auto_c" ).autocomplete( "option", "autoFocus", sel );
// sel is the boolean variable 
Type : object
Default value{}

Classes can be added to elements of autocomplete. Here is the code
$( '#auto_c' ).autocomplete({
classes: {
    "ui-autocomplete": "ui-state-highlight"
To get value of classes
var status_used = $( "#auto_c" ).autocomplete( "option",
 "classes.ui-autocomplete" );
To set value for classes
$( "#auto_c" ).autocomplete( "option",
	"classes.ui-autocomplete", sel );
// sel is the variable 
Type : integer
Default value300

Time dealy in miliseconds between keystroke and filter is applied. Less delay setting mean frequent change in menu ( better for local data) . High delay setting is good for remote data ( less responsive )
$( '#auto_c' ).autocomplete({
delay: 200
To get value of delay
var status_used =
	$( "#auto_c" ).autocomplete( "option", "delay" );
To set value for delay
$( "#auto_c" ).autocomplete( "option", "delay", sel );
// sel is the variable 
Type : boolean
Default valuefalse

disable the autocomplete if set to true
$( '#auto_c' ).autocomplete({
disabled: true
To get value of disabled
var status_used =
 $( "#auto_c" ).autocomplete("option", "disabled");
To set value of disabled
$("#auto_c").autocomplete( "option","disabled",sel);
// sel is the boolean variable 
Type : Integer
Default value1

User must type minimum number of chars before the filter ( search ) as applied, for a large number of items it is better to keep a higher value. For local data or less data we can keep it minimum or zero.
	minLength: 2
DEMO of minLength setting To get value of minLength
var status_used =
To set value for minLength
//sel is the variable 
Type : Object
Default value{ my: "left top", at: "left bottom", collision: "none" }

The menu ( option list ) takes postion with respect to autcomplet element based on the different values.

my : menu of option list
at : autocomplete input element
$( '#auto_c' ).autocomplete({
position: { my : "left top", at: "right bottom" }
To get value of position
var status_used =
	$( "#auto_c" ).autocomplete( "option", "position" );
To set value for position
$( "#auto_c" ).autocomplete( "option", "position",
	{ my : "right top", at: "right bottom" } ); 
We will create one object to get values.
var option_obj = $( "#auto_c" ).autocomplete( "option" );
$('#d2').html( "position my : "  + option_obj.position.my + " 
, position at : " + option_obj.position.at);
Output is
position my : right top , position at : right bottom
Type : array, string or function
Default value none : must specify

$( '#auto_c' ).autocomplete({
source: [ "PHP", "JQuery", "JavaScript", "HTML", "ASP",
	"Perl", "MySQL","Access","Excel","Dot Net" ]
To get value of source
var status_used =
	$( "#auto_c" ).autocomplete( "option", "source" );
To set value for source
$( "#auto_c" ).autocomplete( "option", "source",
 [ "java", "php", "MySQL", "javascript"] ); 


Closes the open menu of autocomplete.
$( "#auto_c" ).autocomplete( "close" );
Removes functionality of autocomplete.
$( "#auto_c" ).autocomplete( "destroy" );
Disable autocomplete.
$( "#auto_c" ).autocomplete( "disable" );
Enable autocomplete functionality.
$( "#auto_c" ).autocomplete( "enable" );
Retrives Instance object of autocomplete.
$( "#auto_c" ).autocomplete( "instance" );
WE can get option value by specifying option name.
var status_used =
	$( "#auto_c" ).autocomplete( "option", "minLength" );
Set value for any option
$( "#auto_c" ).autocomplete( "option", "delay", 100 );
You can see demo of delay here Set multiple option ( name value pair )
$( "#auto_c" ).autocomplete("option",
	{minLength:3,delay:700,autoFocus:true} );
Create option object to check values
var option_obj = $( "#auto_c" ).autocomplete( "option" );
Using this object we can display option values ( name : value ) in this demo.
Triggers search event on autocomplete element.
$( "#auto_c" ).autocomplete( "search",search_string );
// search_string is a variable
We can pass the search string and get the filtered options in menu.
We will use radio buttons to pass pre-set search string to autocomplete element.
If we send blank string then we must set option minLength:0
We can get juqery object containing menu element.
$( "#auto_c" ).autocomplete( "widget" );


Triggers when autocomplete input is blured ( when focus moves out ).
$( "#auto_c" ).autocomplete({
  change: function( event, ui ) {

Triggers when menu of autocomplete is hidden.
$( "#auto_c" ).autocomplete({
  close: function( event, ui ) {

Event listner
$( "#auto_c" ).on( "autocompleteclose", function( event, ui ) {

} );
Triggers when autocomplete is created.
$( "#auto_c" ).autocomplete({
  create: function( event, ui ) {

Event listner
$( "#auto_c" ).on( "autocompletecreate", function( event, ui ) {

} );
Triggers when focus moves to an item ( not selecting ).
$( "#auto_c" ).autocomplete({
  focus: function( event, ui ) {

Event listner
$( "#auto_c" ).on( "autocompletefocus", function( event, ui ) {

} );
Triggers when option menu is opened or updated.
$( "#auto_c" ).autocomplete({
  open: function( event, ui ) {

Event listner
$( "#auto_c" ).on( "autocompleteopen", function( event, ui ) {

} );
Triggers when search completes but menu is not opened.
$( "#auto_c" ).autocomplete({
  response: function( event, ui ) {

Event listner
$( "#auto_c" ).on( "autocompleteresponse", function( event, ui ) {

} );
Triggers search is applied and options are not given.
$( "#auto_c" ).autocomplete({
  search: function( event, ui ) {

Event listner
$( "#auto_c" ).on( "autocompletesearch", function( event, ui ) {

} );
Triggers when one option is selected from menu.
$( "#auto_c" ).autocomplete({
  select: function( event, ui ) {

Event listner
$( "#auto_c" ).on( "autocompleteselect", function( event, ui ) {

} );

Source of data

We can suggest user about matching words by taking words from
  • A list stored in array variables
  • JSON text
  • From database table.
Autocomplete demo with variable as source Autocomplete tutorial with Database as source


* indicates required
Subscribe to plus2net


    Post your comments , suggestion , error , requirements etc here .

    Most Popular JQuery Scripts


    Two dependant list boxes


    Calendar with Date Selection


    Data change by Slider


    Show & Hide element

    JQuery Video Tutorials

    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer