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",

colpick Color Picker

Simple lightweight Photoshop-like color picker, now with touch

...

JQuery Chaos Modal

A Simple yet extendable jQuery modal script built for use with inline HTML, forms, and images

...

Viewport - simple jQuery plugin adding selectors and events for finding and handling elements in viewport

Viewport - is simple jQuery plugin adds custom pseudo-selectors and handlers for simple

...

Dialog By XDSoft

Simple dialog system

Simple dialog analogue Alert

jAlert('Hello World!!!')
...

ImgWheel

Create a responsive, configurable, endless slider from a list of images. Display content

...

jQuery Etherpad

jQuery plugin for embedding Etherpad

Usage & Examples

Include jQuery.js,

...

jQuery Browser Rejection

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

jQuery Array Utilities

Use the set operations UNION, INTERSECT, EXCEPT, known from SQL, to extract data from

...

iCheck

Highly customizable checkboxes and radio buttons (jQuery and Zepto). Features: identical inputs...

Autosize

Automatically adjust textarea height based on user input.

Vide

Easy as hell jQuery plugin for video backgrounds.

Colorbox

jQuery lightbox and modal window plugin

jQuery File Upload

File Upload widget with multiple file selection, drag&amp;drop support, progress bar,...

Mobiscroll Image & Text Scroller

Renders a scrollable list of images with or without optional text for easy data picking on touch...

jQuery Toaster

jQuery plugin for displaying customizable toast notifications via Bootstrap alerts

tmpl

A DOM element based templating engine with a logic-less Zen Coding-like markup, object caching,...

jQuery Form Tooltip

A plugin to enable animated, customisable tooltip on your form inputs when focusing.

jqEye

jQuery plugin for define a behaviour in which a HTML element moves, within the boundaries of an...

jqScrollAnim

jQuery plugin for define animations whose reproduction depends on the position of the vertical...

Linkify URLs, mentions & hashtags

Linky is a jQuery plugin for linkifying URLs, mentions (for Twitter, Instagram or GitHub) and...

jQuery JapaneseCharacter Plugin

This plug-in checks the Japanese..

EliteBox Menu

If do you need fresh menu for your project - see the EliteBox Drop-Down Menu jQuery plugin, maybe...

Simple Signup Form – jQuery Plugin

Build responsive sign up form with email notification. Provides Visual Builder and lot of...

imgix jQuery Plugin

imgix.js is a javascript library that allows you to to work with the imgix service and API to...

jQuery ScrollSlide

A plugin to run a slide animation at a specified scroll position.

jQuery helpers to assert how many elements should be in a jQuery array

jQuery helpers to help verify that your selectors are returning the expected number of elements.

image zooming plugin with a magnifier lens effect

jquery plugin for image zooming.

Smooth Scroll

Easy implementation of smooth scrolling for same-page links

jQuery.iAmIn plugin

Plugin that will set your element on a side of its parent within body (if it can) or at start of...

jQuery Circular Text

A plugin to render text along a circular path, creating a fancy button effect.

Atrribute Extend

A simple plugin that extends jQuery attribute modification similar to *Class functions

jQuery xFilterList

A simple jQuery grid list plugin for easy filter and sorting.

jQuery Price Format

jQuery plugin to convert inputs into price inputs

Google Maps Latitude and Longitude Picker

A jQuery Latitude and Longitude plugin to pick a location using Google Maps. Supports multiple...

Autocomplete like Google

Simple autocomplete like Google

Magneticmediajs jQuery: display your media content with style

Magneticmediajs is a jQuery based library that allows media content (images, videos, maps, HTML...

prmenu

jQuery plugin. Leightweight, responsive menu.

hovertree

jQuery plugin.Tree Menu.Accordion Menu.

rangeslider.js

Simple, small and fast JavaScript/jQuery polyfill for the HTML5 <input...

Easy Carousel

EasyCarousel Plugin is a very practical Carousel plug-ins written in jQuery. Used to show a set...

ABigImage – view big versions of images

Fit mobile devices. Uses CSS3 transform and transition for smooth touch sliding. Touch slide left...

jQuery JIT image

This jQuery plugin facilitates the use of jit image manipulation on the server and medias...

TailorFit

jQuery plugin that fits and centers elements within their containers.

Visual jQuery Lightbox – Beautiful jQuery Lightbox

Visual LightBox is a web photo galleries with a nice Lightbox-style overlay effect. *...

Mimeo

A jQuery plugin for responsive images. Part of the Formstone Library.

Guillotine

Allow users to crop images within an area (fully responsive). Supports dragging (touch support),...

jQuery Slider – WOW image slider

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

Qoopido Lazyimage

jQuery plugin to lazy load images.
good