Tuesday, 6 September 2011

Ajax AutoComplete for jQuery

Ajax AutoComplete for jQuery


Question: What is Autocomplete?
The Autocomplete widgets provides suggestions words or strings without the user needing to type them in full;
For Example:
When you start type "auto" in google search, Its provides you list of suggestions like below:
"auto liker", "autocard", "autocar", "autocar india", etc


Question: How to add "auto complete" in cakephp?
  In ajax autocomplete to add more than one value
You can use "tokens" like below
 new Ajax.Autocompleter('id','upd', 'url', { tokens: ',' });
 http://wiki.github.com/madrobby/scriptaculous/ajax-autocompleter

Autocomplete, when added to an input field, enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering.



Question: How to add "auto complete" in jQuery?
jQuery(document).ready(function()  {
//Autocomplete config
  jQuery("#FriendMyLocation").autocomplete('/autocompletes/index/City/name', {minChars:3}); 
});         

List of config available in Autocomplete.
$.Autocompleter.defaults = {
    inputClass: "ac_input", 
    resultsClass: "ac_results", 
    loadingClass: "ac_loading",
    minChars: 1, 
    delay: 400, 
    matchCase: false,
    matchSubset: true,
    matchContains: false,
    cacheLength: 10,
    max: 100, 
    mustMatch: false,
    extraParams: {},
    selectFirst: true, 
    formatItem: function(row) { return row[0]; },
    autoFill: false, 
    width: 0, 
    multiple: false, 
    multipleSeparator: ", ",
    highlight: function(value, term) { 
        return value.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + term.replace(/([^$()[]{}*.+?|\])/gi, "\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"); 
    }, 
    scroll: true, 
    scrollHeight: 180, 
    attachTo: 'body' 
};
Download the Plugins From https://plugins.jquery.com/ui.autocomplete/