autocompletejs/autocomplete.js

autocomplete.js is lite, fast and stable.

autocomplete.js's Issues

Dropdown list not shown in Bootstrap Modal

Hi,
I've just installed javascript.js in an app and had a problem displying the dropdown list in a Bootstrap Modal.
When initializing dropdown style, width and position were set to 0 in _Position function.
Finally i've added a line for resetting the style after loading items on line 430 in _Render function.

_Render: function (response) {
        var ul;
        if (typeof response == "string") {
            ul = this._RenderRaw(response);
        }
        else {
            ul = this._RenderResponseItems(response);
        }
        if (this.DOMResults.hasChildNodes()) {
            this.DOMResults.removeChild(this.DOMResults.childNodes[0]);
        }
        this.DOMResults.appendChild(ul);
        this.DOMResults.setAttribute("style", "top:" + (this.Input.offsetTop + this.Input.offsetHeight) + "px;left:" + this.Input.offsetLeft + "px;width:" + this.Input.clientWidth + "px;");
    },

Seems to work well.
Don't know if that trick can help... hope so..

Reset input field after selection

I use an input field with autocomplete.js to populate entries in a list. You could see this as similar to adding tasks to a list in a TODO application. In order to add multiple items in a row, I want to clear the input field after an entry from the autoselect list got selected. How can I achieve this?

So far I tried selecting the DOM node via javascript and simply setting its .value property to an empty string. It first looks like this would do the trick, but when I click anything outside of the input field, the previously selected value re-appears.

move the mouse over a choice should update the current selection

Right now, if :

• the user the keyboard to change the selection, but doesn't validate
• move the mouse over the choices
  There are two highlights choices.

It would be less confusing to update the selection when the user moves the mouse over the choices.

Pressing 'Enter' cannot hide the select dialog

Hi @baptistedonaux, thanks for your lightweight autocomplete.js.

When I left-click an item I want to select:

1. item value will insert into the input[autocomplete]
2. select dialog will be disappear / hidden

However, when I press Enter key on the item I want to select:

1. item value will insert into the input[autocomplete]
2. select dialog STILL shows up

Here is the reason of this issue:

if (keyCode == 13 && attr(result, "class").indexOf("open") != -1) {
    // if press Enter, we select the item
    self._args.select(input, liActive);
    // then hide the select dialog
    attrClass(result, "autocomplete");
}

if (keyCode == 38 || keyCode == 40) {
    // key Up and Down
} else if (keyCode < 35 || keyCode > 40) {
    // keyCode of Enter is 13
    if (inputValue && custParams.url) {
        if (!dataAutocompleteOldValue || inputValue != dataAutocompleteOldValue) {
            // __ATTENTION HERE__
            // So that the select dialog shows up again
            attrClass(result, "autocomplete open");
        }

        request = ajax(request, custParams, custParams.paramName + "=" + inputValue, input, result);
    }
}

So that I think the code
else if (keyCode < 35 || keyCode > 40)
may need be changed into
else if (keyCode != 13 && (keyCode < 35 || keyCode > 40))

see revision a36f56d

cannot find AutoComplete()

hi and thanks for the great work

i am having trouble getting it to even function right now and i'm sure it's something i'm doing wrong, but any idea why:

ReferenceError: Can't find variable: AutoComplete

would be happening?

thanks again

Key press up and down may not work in v1.6.0

Hi @baptistedonaux,

In your v1.6.0, you have:

 function attrClass(item, value) {
     if (item) {
        return attr(item, !value ? "class" : {"class": value});
     }
 }

but when you try to remove class="active" by using attrClass(liActive, "") when pressing key up or down. It may not work.

attrClass(liActive, "") // then
attr(liActive, "class") // then in your attr()

try {
  for(var key in "class") {
      item.setAttribute(key=0, value="c");  // throw Error
  }
} catch {/*return the class name of item*/}

In fact, you have changed your attrClass in revision e782083, this change also fixed this issue.

I am wondering why the key press up and down works in you demo website, maybe you use a different version autocomplete.min.js, instead of the v1.6.0 autocomplet.js

After entering the data and press /select last item using up arrow then focus goes to starting point on the search box

After entering the data and press /select last item using up arrow then focus goes to starting point on the search box and not taking result from auto complete.

npm support

Please, publish this as a NPM package too.

Search isn't triggered with only one character

Hi,

I might be getting this wrong, but it seems from the example country search on the main page and in my own implementation that triggering a search with one character now doesn't happen (it worked in version 1.7, but in version 2+, it seems to no longer work).

Any advice?

Cheers

Feature : Escape key to close the menu

It could be useful to be able to hide the menu when the user presses the Esc key.
For example, if there are information behind the menu.

How can I unbind the input?

It's not an issue but rather a question of existing features; Do we have a way to unbind (remove the autocomplete feature from the particular input field) something like Autocomplete.destroy("#input")?

Implement localStorage cache to persist cache

Purposes :

• Shared cache between page with same domain
• Persist cache between two loading

Possibilité de sélectionner la première proposition

Bonjour,
Merci tout ta lib !

J'ai une petite question, est-il possible de sélectionner automatiquement la 1ere proposition dans l'auto-complétion ?

Custom headers support

Hi great simple autoComplete thanks for the work 👍
I was wondering if its possible to allow to pass in custom headers, I see in the source you only set one, in my case it would be great to be able to add multiple headers in order for me to do a GET on the URL.

Let me know if you want to do this or not... or if I should submit a PR

cheers david

Send extra query params

I need to send query params to specify the values expected in response.
For example "values":"name" .

How can I do that?

Highlight matched text

Why not highlight matched text? For example, with a simple "strong" tag, or better with a custom class.

Thanks

query argument customizing

Hello, the REST API to which I'm sending the query only accepts the following format:
/api?<field>=<operator>.<query string>

for instance if I were to search for the name of a person named Roger:
/api?name=ilike.roger

I have declared my search argument as "name=ilike." however it looks like the "=" in my search argument is percentage coded to %3D and an equal sign is stuck before my query string:
/api?name%3Dilike.=roger

which of course results in a bad request.

Is it possible to customize the style of query beyond changing just the query "word"?

Thanks in advance!

add a cache

In the same page, when the user type the same text twice, autocomplete.js sends the same HTTP request.

It would be nice if autocomplete.js could cache the results (not accross HTML pages).

Keyboard Enter without selecting an item.

Hello!

I'd like to have your awesome plugin plus the ability to use the "enter/return" button without selecting one of the autocomplete items.
If i write a few letters within my input field, I can see the suggestions below but when i press return nothing happens.

Is there a workaround or something else you can help me with?

thx in advance stefan

display changes to ID value...

hi again

so if i return an object so:

{"1" : "blah", "2" : "blee", "3" : "bloo"}

when i slected an item in the droplist, the displayed value in the textbox is suddenly the numeric ID value and not the text string

how can i change this behaviour?

thanks

QueryArg via data attribute not works

Hi,
we could set "QueryArg" via "data-autocomplete-param-name" attribute but not works.

To fix this issue, i think you should change the line 500 in:

queryParams = params._QueryArg() + "=" + params._Pre();

So this call the workflow method in place of the settings param.

Regards

Access to request events?

It would be nice to somehow access to AJAX readyState so everyone can manage what happened with the response (eg show a loading indicator)

Regards

example.php

Bonjour Baptiste,
sorry, i do not understand clearly, how to bring (indexing?) the content from my website into the autocomplete-suggestions.... Can you please show the example-script from your demo website? I would like to find out, how you wrote this.

I mean this example-script:
http://autocomplete-js.com/1.5/example.php

Tnx & greetings from Berlin!
:-)

Possible to override clicking an item?

I'm using this great plugin to to an autocomplete for contacts, generally in the form of:

<ul>
      <li>
            <address>
                  <div class="Name">John Smith</div>
                 <div class="Email"><a href="mailto:[email protected]">[email protected]</a></div>
                 <div class="Phone">[phone]</div>
            </address>
      </li>
</ul>

I'd like to be able to cancel "selecting" the item (and filling in the input field) and just make that email address hyperlink work and then manually call "_Blur" to close the autocomplete results

Is that possible? I tried to override the "_Select" method, which allowed me to not fill in the field, but it still closes the ul and doesn't let me follow that hyperlink

Mobile Issue

On Android, Firefox 40.0, keyup event not triggering on mobile without entering a space after the search term.

textarea?

Is it possible to use this on let's say a textarea? so like create a dropdown inside a textarea.
Kinda like here on GitHub when you mention someone?
Like this:
https://gyazo.com/16448344abdd88f4c440cfaf0080e4af.png

Results stay in place after window resize

The result dropdown is placed on initialization and stay there. If you resize the window, it should recalculate its position.
I tried to call _Position() after resize but that gives a new default dropdown and keeps the original too.

Simple "copy & paste" error in docs

Hi,
only now i note that in your doc there's a stupid error: about "QueryArg" in column "Override HTML declaration" you pasted the "HttpMethod" sample.

It's all

tab & esc conditions

Users of autocomplete systems have come to expect the following:

1. Hitting ESC should close the autocomplete.
2. Hitting TAB should select the first item if nothing is active. Hitting TAB if an item is active should do nothing.

It's easy to add this behavior outside the library, but the AlphaNum Conditions are too aggressive. We should add these Conditions to prevent re-renders for those keys. Here's my code to workaround the issue:

    // autocomplete-js is very aggressive about handling keys. Even keys like
    // TAB and ESC cause a re-render, which conflicts with our handling of those
    // keys. Let's reach in there and turn off those keys.
    const conditions = this.autocomplete.KeyboardMappings.AlphaNum.Conditions;
    conditions.push({ Is: 9, Not: true });
    conditions.push({ Is: 27, Not: true });

Show results even with empty input on focus event

I've been using this library successfully and it looks great, but now I need to show some results (more like recommended searches) without any input - just on focus. After I read the source, it seems the the only event where the search is performed is on keyup for alphanumeric characters and so what I want is impossible. If there already are results, then they will show up on focus, but not if the input is empty. Is there a way to do this currently? If not - is it possible to add support for that use-case?

Suggestion on Key/Value support for autocomplete.js

Hi @baptistedonaux,

for default HTML <select>/<option>, we have:

<select>
<option value="key001">display value 001</option>
<option value="key002">display value 002</option>
<option value="key003">display value 003</option>
</select>

Currently, I think your autocomplete.js only supports a simple display value, but sometimes I want:

<ul>
<li value="key001">display value 001</li>
<li value="key002">display value 002</li>
<li value="key003">display value 003</li>
</ul>

I made little changes (see e381632), so that we can display the value of item, and store the key of item into the input[data-autocomplete]:

<input data-autocomplte="/" .... data-autocomplete-item-key="key002" />
<ul></ul>

Also, each JSON item is an Object, not just a string, so we may need keyOfJSON() and valueOfJSON to allow user to customize the key and display value. (also see e381632).

By the way, my solution may not be the best one, you can use your code style in your own way, and I will keep following your codes.

Thanks.

destroy method

You should provide a destroy method to unbind all events and make sure no memory is still used, similar to jquery destroy:

http://api.jqueryui.com/autocomplete/#method-destroy

no demos

Configuring KeyBoard Mappings

It would be nice to be able to customize Keyboard Mappings to implement more advanced behaviours and modify existing ones. For example I can't see a way to bind the ESC key that doesn't require some heavy hacking with the internals.

Any thoughts/suggestions?

Click is not registered if holding mouse key for too long

Test case:

1. Start typing into suggester (e.g. on project's demo page). Wait for suggestions to pop up.
2. Left-click on the one of suggestions. Do not release the mouse key but hold it for 2s.
3. Release mouse button.

Expected:
Suggestion is selected and its value is shown in the input field. List is closed right after mouse button is released.

Actual:
List is closed way before mouse button is released because input's blur event fires list close animation. Click event of the suggestion element therefore cannot be fired.

Multiple Autocompletes use same cache

I have three Autocomplete fields on the same page which query different endpoints. It seems they all use the same cache.

Can I use a different cache for each field by overriding something or do I need to invalidate the cache somehow when a different field has focus?

[Deprecation] Using unescaped '#'

Console show this message :

[Deprecation] Using unescaped '#' characters in a data URI body is deprecated and will be removed in M68, around July 2018. Please use '%23' instead. See https://www.chromestatus.com/features/5656049583390720 for more details.

Enter key ignored when the user doesn't choose an autocompletejs choice.

event.preventDefault();

should be inside the

if (liActive !== null) {

condition.

Scenario :

• the user types something
• autocompletejs shows some choices
• the user presses press enter (without using the autocomplete choices)

Then the enter key is ignored because some choices are shown.

When item is selected input remains empty

I am having a problem with selecting an item returned by the autocomplete.
I write some letters, see some suggestions and when i click one of them, nothing happens, the input field remains empty.
Problem encountered on both mobile and desktop.

Have you an idea about this issue ?

Thanks

Maybe some delay and not send ajax on every key press?

Wait until user stop typing. Like here http://stackoverflow.com/a/7849308/4559221

How to use directly without NPM?

I'm using WordPress and want to include this script only on one single page.
How can I do that? If I use the js file directly I get AutoComplete is undefined error.

Be able to key out of suggestions list

(I have added pull request #50 for this)

Scenario:

pull request in issue #46 is merged
List of suggestions is open
User navigates the list with up/down arrow keys
User reaches the first (going up) or last (going down) item the list
Now the user can not "leave" the list to be able to submit the text in the search field with [enter]

My pull request makes the active item not wrap around, but removes the active state after the first / last item is passed. (Hitting the up/down key one more time then starts a new sequence, so the order will become 1st - 2nd - 3rd - last - none - 1st - 2nd...)

this._Limit() Not Enforced

It seems that this._Limit() is not enforced on the results. I am not sure if this is by design, but I would assume that the limit would be imposed on the rendering of the response, so that the <ul> would only contain a set amount of results (the limit).

_QueryArg: function () is never consumed

Please consider using the function in AutoComplete.prototype.ajax() rather than the property. I also recommend setting the query parameters in the default implementation of _QueryArg().

default _Blur always has now == true

_Blur() acts as event handler for input.blur event.
It's signature looks like this (took from compiled, vanilla JS code):

_Blur: function (now) {
	if (now === void 0) { now = false; }
	if (now) {
		this._Close();
	}
	else {
		var params = this;
		setTimeout(function () {
			params._Blur(true);
		}, 150);
	}
},

However, now is always a FocusEvent instance. Therefore, now is always equal (in non-strict sense) to true, and timeout is never fired. This causes race condition between click on suggestion element and animation of closing list with suggestion elements. If you remove close animation, click event will be never fired.

Can't select value on Safari

Hi,
On safari (5.1.7), I can't select a value from the autocompleted list, when I try, the list just close without trigger event attached in _Open() method.

I search for reason and I found this :
I think when I click on a choice (a <li>), blur event of element <input> is trigger BEFORE my click, so the autocomplete list closed immediately, and my click didn't "hit" my <li>.

I fix this problem by forcing delay before close my list
_Blur: function (now) { setTimeout(function () { this.DOMResults.setAttribute("class", "autocomplete"); }.bind(this), 150); }

How to work with different data model

Is there a way how I could got town, state and country and display like: "Town, State, Country" as proposal from my data format?

And then, can I somehow got filled a hidden field with woe_id value of selected element (to be able to use it on form submit)?

My data format:

{"error":false,"data":[{"woe_id":"735160","iso":"NL","town":"Zutphen","state":"Gelderland","centroid_lat":"52.140202","centroid_lng":"6.191520"},{"woe_id":"151831","iso":"MX","town":"Zumpango","state":"Mexico","centroid_lat":"19.798210","centroid_lng":"-99.101059"},{"woe_id":"735133","iso":"NL","town":"Zuidland","state":"Zuid-Holland","centroid_lat":"51.824059","centroid_lng":"4.259920"},{"woe_id":"735153","iso":"NL","town":"Zuilichem","state":"Gelderland","centroid_lat":"51.808201","centroid_lng":"5.124850"},{"woe_id":"2289170","iso":"IN","town":"Zunheboto","state":"Nagaland","centroid_lat":"26.008770","centroid_lng":"94.512947"},{"woe_id":"151832","iso":"MX","town":"Zumpango de Ocampo","state":"Mexico","centroid_lat":"19.790001","centroid_lng":"-99.102493"},{"woe_id":"346119","iso":"BO","town":"Zud\u00e1\u00f1ez","state":"Chuquisaca","centroid_lat":"-19.149530","centroid_lng":"-64.643387"},{"woe_id":"709274","iso":"DE","town":"Z\u00fclpich","state":"Nordrhein-Westfalen","centroid_lat":"50.692341","centroid_lng":"6.647600"},{"woe_id":"735101","iso":"NL","town":"Zuid-Beijerland","state":"Zuid-Holland","centroid_lat":"51.749939","centroid_lng":"4.367090"},{"woe_id":"735129","iso":"NL","town":"Zuidhorn","state":"Groningen","centroid_lat":"53.244370","centroid_lng":"6.407900"}]}

Form submits on enter key

Put 'll', select 'Hello' with arrows, press enter, input text replaced with 'Hello', but before it form send with 'll' to server

 if (keyCode == 13 && attr(result, "class").indexOf("open") != -1) {
    # Adding this dosn't help
    e.preventDefault();
    e.stopPropagation();

Why put attr, attrClass and domCreate globally?

Hi @baptistedonaux,

I just wondering why you put attr(), attrClass() and domCreate() globally, instead of inside the AutoComplete object?

Thanks again for the lite autocomplte.js, I am using it.

keyboard selection and forms

Setup :

• a form with a input text and a submit button.

Use case :

• set the focus on the input text
• select an autocomplete choice with the keyboard (arrow keys)
• press enter

What happen :

• the form is submit with the value before the selection (if I didn't mess up with the installation see bellow)

What is expected :

• the form is submitted with the selected value

See : https://al-f.net/searx/?q=autocomplete-js (source code)