fischer-l / autocomplt

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

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://fischer-l.github.io/autoComplt/

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.

autocomplt's Issues

WHat is the need of !! operator and + operator

Firstly,Thanks a lot for this work.i am also implementing my autocomplete which is based on your autoComplt.i read all the source code.in Demo.html file at various places u used this operator

69 return !!autoComplt.enable(inputs[0], {
77 return !!autoComplt.enable(inputs[2],
in autoComplt.js file,at two places you used this operator
410 return !!(cls.indexOf(" " + _CONST.autoCompltHintClass + " ") >= 0);
461 return !!(this.uiElem.getAttribute(_CONST.listStatus.attr) == _CONST.listStatus.open);

as far as i read javascript or write code.i think !! will have no effect .Please explain use of this !! operator or should i omit it ??

at various places you used +with variable which will have no effect.
575 hint = +candidate;
817 buf = Math.floor(+params.delay);
824 buf = Math.floor(+params.maxHintNum);
if there is any then please tell else i am omitting these extra symbols operator.thanks.

Set style z-index dont work

I need to change z-index property, but by SetStyles()
styles = {

            "autoComplt-list" : {
                attrs : ["z-index"],
                values : ["9999999999"]
            },

it dont change property, and z-index is still 99.
Also i cannot find where is default properties are setting.

Not working for input type="search" and one more problem

Thanks for awesome autocompite - its works great, but i have found some bugs.
1 - I need to add clear button inside input, without jquery and so on, thats why im using just type="search" into input, its works great but your autocomplite doesnt works with it.
2 - I want to add div inside live result, when shows some information which floats left, but this div is not clickable for select.

Just a liitle thanks

I was trying to implement autocomplete into an angular.js view, in a really messy project. All the jquery implementations failed, but this one jqueryless implementation worked flawlessly.

So just a thanks from random stranger. Have been pondering over this issue since ages.

PS: Didnt find any other ways to contact you, sorry for using issues :)

After changes source for openList they don't change.

Hello! I use your library and thanks for it! But I have a trouble with changing source:

init: function (input_field, country_code) {
  autoComplt.enable(input_field.get(0), {
    hintsFetcher: function (v, openList) {
      var hints = [],
        names = [];
      $.get("/address-autocomplete?city=" + v + "&country=" + country_code, function (data) {

I change the country_code, but it didn't change...

Ability to integrate a delay when list is driven by an AJAX request

When an autocomplete list is driven based off of data sent back from an AJAX request, the hintsFetcher function would be called for each character typed. An example where this could be problematic would be a text-box that populates the autocomplete list of users based on the value typed into the autoCompleteElement textbox.

var inp = document.getElementById("autoCompleteElement");
 autoComplt.enable(inp, {
     hintsFetcher: function (val, openList) {
           var params = {};
            // setup the user parameter for AJAX call
            params.user = val;
            $.ajax({
                type: 'GET',
                url: ...,
                dataType: "jsonp",
                data: params,
                success: function (jsonData) {
                    openList(jsonData.data);
                },
            });
        }

An AJAX request will be generated for each character typed into the box. This is undesirable if I were to be typing an user with an extremely long name where N requests is generated for N characters.

One approach to mitigate this sort of problem would be to incorporate a property that can be set on autoComplt to delay hint fetching after a certain time once the user had stopped typing.

This would resolve the problem for multiple requests being sent over to the server as it would only be generated once when the user has stopped typing.