Best Period Picker

Autocomplete like Google jQuery Plugin

JQuery Autocomplete plugin is a lightweight simple and easy in settings autocomplete like Google. Support Accent Folding

Local Remote Local&Remote Source Download

How to use autocomplete?

Insert code

add this code after </body> in your document.

<link type="text/css" rel="stylesheet" hr­ef="autocomplete.css"/>
<script sr­c="jquery.min.js"></script>
<scri­pt sr­c="autocomplete.js"></script>

Add data for autocomplete

var states = [
  'Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
  'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 
  'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 
  'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 
  'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 
  'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
  'New Jersey', 'New Mexico', 'New York', 'North Carolina', 
  'North Dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 
  'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 
  'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 
  'West Virginia', 'Wisconsin', 'Wyoming'
];

Init autocomplete plugin

$(function() {
  $("input").autocomplete({
    source:[states]
  }); 
});

Autocomplete from remote data

Ajax

use ajax for getting data from server

<script>
$('#remote_input').autocomplete({
  valueKey:'title',
  source:[]
});
$('button#open').click(function(){
  $('#remote_input').trigger('open');
  $('#remote_input').focus();
});
</script>

or use custom function

$("#remote_input1").autocomplete({
 source:[
  function( q,add ){
   $.getJSON("index.php?s="+encodeURIComponent(q),function(resp){
    add(resp.data)
   })
  }
 ]
});

or combain static with dinamic variants

$('#remote_input2').autocomplete({source:[
 {
  url:"/component/jquery_plugins/?task=demodata&q=%QUERY%",
  type:'remote'
 },
 ["One","Two","Three"]
]});

You can use not only array, you can use object

$('#remote_input2').autocomplete({source:[{
 data:[
  {id:1, title:"alabama"},
  {id:2, title:"alaska"},
  {id:3, title:"georgia"},
  {id:4, title:"texas"},
  {id:6, title:"california"}
 ],
 getTitle:function(item){
  return item['title']
 },
 getValue:function(item){
  return item['title']
 },	
}]}).on('selected.xdsoft',function(e,datum){
 alert(datum.id);
 alert(datum.title);
}); 

Full options list

Name default Ex.
minLength 0 {minLength:3}
The minimum length of the input query, the plugin will handle it
appendMethod "concat" {appendMethod:'replace'}
How to update a set of data source. If all your search logic is on the server side, you can disable the filter method and the valid and output data came from the server as it is
jQuery('#inputWhereareyou').autocomplete({
 dropdownWidth:'auto',
 appendMethod:'replace',
 valid: function () {
  return true;
 },
 source:[
  function (q, add){
   var url = 'http://geocode-maps.yandex.ru/1.x/?callback=?';
   jQuery.getJSON(url+"&format=json&geocode="+encodeURIComponent(q), function(data){
    var suggestions = [];
    if (data.response) {
     jQuery.each(data.response.GeoObjectCollection.featureMember, function(i, val){  
      suggestions.push(val.GeoObject.metaDataProperty.GeocoderMetaData.text);  
     });
     add(suggestions);
    }
   })
  }
 ]
});
accents true
Enable accent Folding for Auto-Complete. When you will type «Àɬă» plugin will find «Alabama» item
replaceAccentsForRemote true
if accents==true and you are typing «Àɬă» plugin will find Alabama in local source. But if replaceAccentsForRemote==false then to remote server will be sent how is was written.
valueKey 'value'
The key for the identification field of the object, which contains the value
titleKey 'title' {titleKey:'value'}
The key for the identification field of the object, which contains the suggestion's label
highlight true
highlight the matching parts of words
showHint true
Show prompts behind the input field
Width for dropdown list
Custom style for dropdown list
itemStyle {} {itemStyle:{background:'red', color:'#fff', width:'500px'}
Custom style for dropdown list element
hintStyle false {hintStyle:{background:'red'}
When plugin inits, style for "Hint" element takes from input element. All style's field copy to "Hint" element, but you can add custom style to "Hint". It will be combined with the copied style
style false {style:{background:'red'}
Plugin wraps input element in DIV box. For it is possible to set a custom style
openOnFocus true
Open dropdown list after focus in input
closeOnBlur true
Close dropdown list after blur from input
autoselect false
When element lost focus and nothing was selected take first element from suggestions
limit 20
How many suggestions will be shown in drop-down list
visibleLimit 20
How many suggestions will be visible in drop-down list. If limit>visibleLimit then will show scrollbar
visibleHeight 0
Alternative for visibleLimit. It value simple reaplace visibleLimit*defaultHeightItem and will set max-height rule for dropdown list
defaultHeightItem 30
When dropdownlist not visible then imposible to get height from suggestion's item, so it value will be apply in this case
source []
{
 source:[
  // local
  ['Alpha', 'Beta', 'Gamma'],
  
  // custom function
  function( q,add ){
   add(['Delta','Epsilon','Zeta','Eta']);
  },
  
  // local like object
  {
   data:['Theta','Iota','Kappa']
  },
  
  // dinamic from local server
  {
   url:"/?task=demodata&q=%QUERY%",
   type:'remote'
  },
  
  // preload data from local server
  {
   url:"/?task=demodata&q=will",
   type:'remote'
  },
  
  // dinamic request from remote 
  // server through JSONP
  {
   url:"/test.php?query=%QUERY%",
   type:'remote',
   ajax:{
    dataType : 'jsonp'
   }
  }
 ]
}
Source for suggestions, can be array or object or function.
getValue function
if in your data main value is not 'value' field, use it function
getValue:function(item){
	return item.title
}
getTitle function
When an element is rendered, the text is taken from the "Title", but you can override this behavior
getTitle:function(item){
	return item.value
}
replace function
Function compiles a URL address for AJAX request. Default
function( url,query ){
 return url.replace('%QUERY%',encodeURIComponent(query));
}
render function
Function item renderer. Default
function( item,source,pid,query ){
 var value = item[this.valueKey],
     title = item[this.titleKey];
 return '<div '+(value==query?'class="active"':'')+
  ' data-value="'+
  encodeURIComponent(value)+'">'+
  title+
  '</div>';
}
preparse function
Custom manipulate with data. Default
function(items){
	return items;
}
valid function
Checks the suitability of a particular item, the current query. Default
function ( value,query ){
	return value.toLowerCase().indexOf(query.toLowerCase())!=-1;
}
filter function
Filter source's data. Default
function ( items,query,source ){
 var results = [],value = '';
 for(var i in items){
  value = items[i][this.valueKey];
  if( this.valid(value,query)  ){
   results.push(items[i]); 
  }
  return results;
 }
equal function
Method to search equal values. Default
function( value,query ){
 return query.toLowerCase()==value.substr(0,query.length).toLowerCase();
}
findRight function
Method to search for an item whose value will be placed in the Hint. Default
function(items,query,source){
 var results = [],value = '';
				
 for(var i in items){
  value = items[i][this.valueKey];
				
  if( this.equal(value,query,source) ){
   return items[i];
  }
 }
				
 return false;
}

Methods

destroy Use when you need destroy plugin
jQuery('#auto1').autocomplete({
	source:[states]
});
// ...
jQuery('#auto1').autocomplete('destroy');
        
update When the page size has been changed, or have been made some changes in DOM, you will need to recalculate the position and size to wrap plug
jQuery('#auto1').autocomplete({
	source:[states]
});
// ...
jQuery('#auto1').autocomplete('update');
options(mixed _options) Set other options after init plugin
jQuery('#auto1').autocomplete({
	source:[states]
});
// ...
jQuery('#auto1').autocomplete('options',{sources:[['one','two','three']]});
setSource(mixed source[,int id]) Set other source for plugin's suggestions. If you did not specify "id" when will by replace all sources list, but if you need replace only one source then you should be put second argument
$('#combine').autocomplete();

$('#combine')
 .autocomplete('setSource',{
  {
   valueKey:'title',
   url:"/test.php?query=%QUERY%",
   type:'remote',
   getValue:function(item){
    return item.title
   },
   ajax:{
    dataType : 'jsonp'
   }
  },
  [],
  []
});
	
$('#combine')
 .autocomplete('setSource',states,1)
 .autocomplete('setSource',['one','two','three','for','five','six','seven','eight','nine','zero'],2);
setSource([int id]) Sometimes you need replace only one field for source or just learn what is this option
//for above example
var first = $('#combine')
	.autocomplete('getSource',0);
first.url = "/test.php?query=%QUERY%&test=1",

jQuery Slideshow with hardware-accelerated transitions

Responsive, accessible as a pure CSS slideshow. Prev/next navigation, bullets with thumbnails,...

Fixed Table Header and Left Column

jQuery plugin to modify a table element with a fixed header element and fixed left columns.

Easy responsive tabs to accordion

Easy responsive tabs - is a lightweight jQuery plugin which optimizes normal horizontal or...

jQuery DOM Cache

Using $.cache (or $.domCache) may dramatically increase the performance of your web application...

jQuery Marquee with CSS3 Support

jQuery plugin to scroll the text like the old traditional marquee. NOW with CSS3 support.

Bootstrap Image Gallery

Bootstrap Image Gallery is an extension to blueimp Gallery, a touch-enabled, responsive and...

jQuery Ajax Loading

jQuery Ajax Loading.

jScroll – jQuery Plugin for Infinite Scrolling / Auto-Paging

jScroll is a jQuery plugin allowing you to effortlessly implement infinite scrolling, lazy...

Galereya

Responsive, easily customizable gallery with a masonry layout

Mosaic Flow

Pinterest like responsive image grid for jQuery that doesn’t suck.

jQuery editable select box

This plugin allows you to make a select box editable like a text box while keeping it's...

jBox

jBox is a powerful and flexible jQuery plugin, taking care of all your modal windows, tooltips,...

Card Deck Slideshow

This content slideshow script utilizes CSS3 transform to rotate and "unhinge" each...

TagCanvas HTML5 canvas tag cloud

Displays tags as a 3D rotating tag cloud using an HTML5 canvas

WordPress Lightbox – Catalyst Template

Wordpress Image Lightbox. Catalyst Style DEMO. Wordpress Photo Lightbox maker comes with a...

jQuery Turtle

jQuery plugin for turtle graphics. Every element is a turtle that can rotate, move, animate,...

DataTable AJAX Pagination jQuery plugin

The best jQuery AJAX Pagination plugin——DataTable jQuery plugin!

Simple Calendar and Date Picker

A simple calendar and date picker only depends on JQuery

jQuery SumoSelect

SumoSelect is a jquery plugin which beautifully renders a single or multiple HTML select element....

qTip2 – Pretty powerful tooltips

Introducing... qTip2. The second generation of the advanced qTip plugin for the ever popular...

jQuery Browser Rejection

jReject is a simple tool for rejecting specific browsers in a nice modal window

jQuery Date and Time picker

jQuery plugin for date, time, or datetime manipulation in form

fancy input

Makes typing in input fields fun with CSS3 effects

Blindify

Blindify is a jQuery plugin which creates a slideshow featuring a blinds effect transitioning...

jQuery Circliful Plugin

jQuery plugin for showing circle statistics.

jQuery droparea

jQuery plugin for HTML5 drag-and-drop (images and files).

appendGrid – The dynamic table input jQuery plugin

appendGrid allow you to input structured data row by row such like filling spreadsheets. It...

Acxmenu – multilevel jquery accordion menu

Acxmenu - multilevel jquery accordion menu plugin for jQuery.

Flexible jQuery slider plugin

with ayaSlider you can create a flexible slider with multiple parallax effects, there is no...

Bootstrap Datagrid

bs_grid is a jQuery Datagrid plugin, based on Twitter Bootstrap. Advanced row selection, sorting,...

jQuery Photobox

A lightweight CSS3 image gallery plugin for jQuery that is pretty to look and and easy to use.

mBox fullscreen lightbox plugin

mBox is a true full-screen light box(modal box) solution. Full Screen feature is supported by...

Bootstrap Form Helpers Date Picker

Date Picker jQuery plugin for Bootstrap.

jQuery Tiles

Splits images in as many tiles as you want, even with a gap.

Bootstrap Auto-Hiding Navbar

An extension for Bootstrap's fixed navbar which hides the navbar while the page is scrolling...

jQuery nanoGALLERY

Image gallery simplified. Touch enabled, responsive, justified/cascading/grid layout and it...

Canvas Image Map Area Editor

Create and edit image map area polygons in a canvas-based GUI that replaces form elements.

jQuery Slider – WOW image slider

WOW Slider is a jQuery image slider plugin with fantastic visual effects and beautifully...

aciTree – A customizable treeview control

aciTree renders a treeview control based on a simple data structure. The tree can be lazy loaded...

Bootstrap Tags Input

jQuery plugin providing a Twitter Bootstrap user interface for managing tags.

Bootstrap TouchSpin

A mobile and touch friendly input spinner component for Bootstrap 3.

Switchy

This is a tiny jQuery plugin which can be used as both a switch or a slider.

jQuery Waterwheel Carousel

This jQuery plugin can display images with a cascading waterwheel effect.

jQuery Clock or Timer plugin in retro flip-count down style

jQuery Clock,Timer or Counter plugin in retro flip-count down style. The plugin can display the...

jQuery Super Labels

Give your forms a helping of awesome!

Bootstrap Form Helpers Country Picker

Country Picker jQuery plugin for Bootstrap.

autoNumeric – Currency formatting made easy

jQuery plugin that automatically formats currency (money) and numbers as you type on form inputs....

jQuery Slide and Fade

jQuery plugin for sliding and fading out groups of elements.

jQuery Number Format

Easily format numbers for display use. Replace numbers inline in a document, or return a...