Autocomplete using different sources and passing values on select

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>

JQuery

<script>
$(document).ready(function() {
////////////////
$( "#auto_c" ).autocomplete({
  source: [ "PHP", "JQuery", "JavaScript", "HTML", "ASP",
	"MySQL","Access","Excel","Dot Net" ]
});
///////////////
})
</script>

Options

appendTo
autoFocus
Classes
delay
disabled
minLength
position
source

Methods

close
destroy
disable
enable
instance
option
search
widget

Events

change
close
create
focus
open
response
search
select

appendTo

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

autoFocus

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

classes

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

delay

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

disabled

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

minLength

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.

$('#auto_c').autocomplete({
	minLength: 2
	});

DEMO of minLength setting To get value of minLength

var status_used =
$("#auto_c").autocomplete("option","minLength");

To set value for minLength

$("#auto_c").autocomplete("option","minLength",sel);
//sel is the variable

position

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

source

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"] );

Methods
close
Closes the open menu of autocomplete. `$( "#auto_c" ).autocomplete( "close" );` DEMO of close

destroy

Removes functionality of autocomplete.

$( "#auto_c" ).autocomplete( "destroy" );

disable

Disable autocomplete.

$( "#auto_c" ).autocomplete( "disable" );

enable

Enable autocomplete functionality.

$( "#auto_c" ).autocomplete( "enable" );

instance

Retrives Instance object of autocomplete.

$( "#auto_c" ).autocomplete( "instance" );

option

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

widget

We can get juqery object containing menu element.

$( "#auto_c" ).autocomplete( "widget" );

Events
change
Triggers when autocomplete input is blured ( when focus moves out ). `$( "#auto_c" ).autocomplete({ change: function( event, ui ) { } });` DEMO of change event with different keys

Triggers when menu of autocomplete is hidden.

$( "#auto_c" ).autocomplete({
  close: function( event, ui ) {

  }
});

Event listner

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

} );

create

Triggers when autocomplete is created.

$( "#auto_c" ).autocomplete({
  create: function( event, ui ) {

  }
});

Event listner

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

} );

focus

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 ) {

} );

open

Triggers when option menu is opened or updated.

$( "#auto_c" ).autocomplete({
  open: function( event, ui ) {

  }
});

Event listner

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

} );

response

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 ) {

} );

select

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

This article is written by plus2net.com team.

plus2net.com

Most Popular JQuery Scripts
1	Two dependant list boxes
2	Calendar with Date Selection
3	Data change by Slider
4	Show & Hide element

JQuery UI Autocomplete

JQuery UI Autocomplete - Array Source Part I

Displaying an auto complete box

Source of data

1

2

3

4