JQuery Autocomplete ui

autocomplete with menu JQuery autocomplete helps user in picking up matching keyword while entering characters into the auto complete text box.
Search for Pin code and other details of an Indian location by using autocomplete with database as source
Autocomplete Search

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.


plus2net.com


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







Most Popular JQuery Scripts

1

Two dependant list boxes

2

Calendar with Date Selection

3

Data change by Slider

4

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