Google Style Easy Autocomplete Plugin For jQuery
File Size: | 55.8 KB |
---|---|
Views Total: | 11544 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Just another jQuery autocomplete plugin that displays a Google-style autocomplete dropdown list as you type something into a text field. Supports both local data and remote data via Ajax queries.
Basic Usage:
1. Include jquery.autocomplete.css
in the header and jquery.autocomplete.js
in the footer but after loading jQuery library.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="jquery.autocomplete.js"></script>
2. Create an input field on your web page.
<input type="text" id="demo" placeholder="Type something...">
3. Create local data for autocomplete using JS array object as shown below.
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' ];
4. Call the function on the input field and done.
$('#demo').autocomplete({ sources:[states] });
5. How to load remote data from a server using Ajax technique.
$('#remote_input').autocomplete({ valueKey:'title', sources:[{ url:"json.php?query=%QUERY%", type:'remote', getValueFromItem:function(item){ return item.title }, ajax:{ dataType : 'jsonp' } }]}); $('#open').click(function(){ $('#remote_input').trigger('open'); $('#remote_input').focus(); });
6. Default plugin settings.
minLength: 0, valueKey: 'value', titleKey: 'title', highlight: true, showHint: true, dropdownWidth: '100%', dropdownStyle: {}, itemStyle: {}, hintStyle: false, style: false, debug: true, openOnFocus: false, closeOnBlur: true, autoselect: false, accents: true, replaceAccentsForRemote: true, limit: 20, visibleLimit: 20, visibleHeight: 0, defaultHeightItem: 30, timeoutUpdate: 10, appendMethod: 'concat', // supported merge and replace source:[], afterSelected: function() {}, get: function (property, source) { return __get.call(this,property,source); }, replace: [ function (url, query) { if (this.replaceAccentsForRemote) { query = accentReplace(query); } return url.replace('%QUERY%',encodeURIComponent(query)); } ], equal:function( value,query ){ return query.toLowerCase()==value.substr(0,query.length).toLowerCase(); }, findRight:[ function(items,query,source){ var results = [],value = '',i; if (items) { for (i = 0;i < items.length;i += 1) { value = __safe.call(this,'getValue',source,[items[i],source]); if (__safe.call(this, 'equal', source, [value,query,source], false)) { return items[i]; } } } return false; } ], valid:[ function (value, query) { if (this.accents) { value = accentReplace(value); query = accentReplace(query); } return value.toLowerCase().indexOf(query.toLowerCase())!=-1; } ], filter:[ function (items, query, source) { var results = [], value = '',i; if (items) { for (i = 0;i < items.length;i += 1) { value = isset(items[i][this.get('valueKey', source)]) ? items[i][this.get('valueKey', source)] : items[i].toString(); if (__safe.call(this, 'valid', source, [value, query])) { results.push(items[i]); } } } return results; } ], preparse:function(items){ return items; }, getValue: [ function (item, source) { return isset(item[this.get('valueKey',source)])?item[this.get('valueKey',source)]:item.toString(); } ], getTitle: [ function (item, source) { return isset(item[this.get('titleKey',source)])?item[this.get('titleKey',source)]:item.toString(); } ], render: [ function (item, source, pid, query) { var value = __safe.call(this, "getValue", source, [item, source], defaultSetting.getValue[0].call(this, item, source)), title = __safe.call(this, "getTitle", source, [item, source], defaultSetting.getTitle[0].call(this, item, source)), _value = '', _query = '', _title = '', hilite_hints = '', highlighted = '', c, h, i, spos = 0; if (this.highlight) { if (!this.accents) { title = title.replace(new RegExp('('+escapeRegExp(query)+')','i'),'<b>$1</b>'); }else{ _title = accentReplace(title).toLowerCase().replace(/[<>]+/g, ''), _query = accentReplace(query).toLowerCase().replace(/[<>]+/g, ''); hilite_hints = _title.replace(new RegExp(escapeRegExp(_query), 'g'), '<'+_query+'>'); for (i=0;i < hilite_hints.length;i += 1) { c = title.charAt(spos); h = hilite_hints.charAt(i); if (h === '<') { highlighted += '<b>'; } else if (h === '>') { highlighted += '</b>'; } else { spos += 1; highlighted += c; } } title = highlighted; } } return '<div '+(value==query?'class="active"':'')+' data-value="'+encodeURIComponent(value)+'">' +title+ '</div>'; } ]
7. API methods.
// destroy the plugin $('#demo').autocomplete('destroy'); // updates the autocomplete $('#demo').autocomplete('update'); // sets the options $('#demo').autocomplete('options', {OPTIONS}); // sets the data source $('#demo').autocomplete('setSource', SOURCE, INIT-ID);
Changelog:
2018-09-10
- Fixed issue For Firefox to change the color of autocomplete input background while window resizing.
2018-02-19
- New version 1.2.8.
2017-12-28
- proper handling of intervalForVisibility interval id
2017-11-04
- Add afterSelected method
2015-11-17
- Update jquery.autocomplete.js
2015-07-10
- fix bug with getValue and getTitle custom function
2015-04-16
- fix bug when input has background with color has setted important
2015-04-07
- added minLength option and setted openOnFocus on false on default
2015-04-05
- Fixed bug with entering bracket symbol and fixed bug with first source
2015-02-12
- Update jquery.autocomplete.js
2014-11-19
- fix work in ie8
2014-10-30
- Fix problem with setSource
2014-10-14
- Added visibleLimit,visibleHeight,defaultHeightItem options
2014-10-14
- Added special methods
2014-10-10
- Support Accents. Fix resize plugin with resize window
2014-10-08
- Added Strict mode
2014-09-30
- Fix bug with ajax update
This awesome jQuery plugin is developed by xdan. For more Advanced Usages, please check the demo page or visit the official website.