JQuery Autocomplete ui

autocomplete with menu JQuery autocomplete helps user in picking up matching keyword while entering characters into the auto complete text box.

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
Methods
Events
OptionsDetails
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
});
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
sourceType : 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 minLength 
$( "#auto_c" ).autocomplete( "option", "source", [ "java", "php", "MySQL", "javascript"] );

Methods

close Closes the open menu of autocomplete. 
$( "#auto_c" ).autocomplete( "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 ) {
	  
  }
});
close 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.
Visitors Rating
Your Rating




Google+

Post Comment This is for short comments only. Use the forum for more discussions.







Most Popular JQuery Scripts

1

Two dependant list boxes

2

Calendar with Date Selection

3

Data change by Slider

4

Show & Hide element
HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us
©2000-2018 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer