Skip to content

Auto-generates the autocomplete list when user inputs some text in the <input> element.

License

Notifications You must be signed in to change notification settings

anilshah/autoComplt

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

41 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

autoComplt

What is autoComplt ?

The autoComplt is written in Javascript and lightweight and simple to use. It auto-generates the autocomplete list when user inputs some text in the <input> element.

Try it here => http://jsfiddle.net/Fischer/eTw62/

No need of any extra lib/framework

The autoComplt has no dependencies on other libs or frameworks.

How to use

== Load the script ==

Load the autoComplt js script into your document. After loading, there would be one global object called autoComplt. Use that global autoComplt object to enable the autocomplete feature on the desired <input> element.

== Example ==

Suppose the HTML:

<input name="name" type="text"></input>

Call autoComplt.enable to enable the autocompelte feature on the <input> element above as below:

var input = document.querySelector("input[name=name]");
autoComplt.enable(input, {
    // the hintsFetcher is your customized function which searchs the proper autocomplete hints based on the user's input value.
    hintsFetcher : function (v, openList) {
        var hints = [],
            names = [ "Masahiro Tanaka", "Darvish", "Daisuke Matsuzaka" ];
        
        for (var i = 0; i < names.length; i++) {
            if (names[i].indexOf(v) >= 0) {
                hints.push(names[i]);
            }
        }
        
        openList(hints);
    }
});

After running the codes here, the autocomplete list will appear to give the hints for users.

Configuration and styles

The <input> element which is enabled with the autocomplete feature would carrys one property named "autoComplt". Use that property's input.autoComplt.config method to config the autocomplete features and input.autoComplt.setStyles to change the UI styles. There are more public APIs for use, please refer to the autoComplt.js.

About

Auto-generates the autocomplete list when user inputs some text in the <input> element.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 89.8%
  • HTML 8.2%
  • CSS 2.0%