Google Style Easy Autocomplete Plugin For jQuery

Google Style Easy Autocomplete Plugin For jQuery
File Size: 55.8 KB
Views Total:
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.