autocompletejs / autocomplete.js Goto Github PK
View Code? Open in Web Editor NEWautocomplete.js is lite, fast and stable.
Home Page: http://autocomplete-js.com
License: Other
autocomplete.js is lite, fast and stable.
Home Page: http://autocomplete-js.com
License: Other
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?
Please, publish this as a NPM package too.
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 ?
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.
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.
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"}]}
Hi @baptistedonaux, thanks for your lightweight autocomplete.js.
When I left-click an item I want to select:
input[autocomplete]
However, when I press Enter
key on the item I want to select:
input[autocomplete]
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
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!
:-)
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.
Test case:
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.
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?
Right now, if :
It would be less confusing to update the selection when the user moves the mouse over the choices.
On Android, Firefox 40.0, keyup event not triggering on mobile without entering a space after the search term.
You should provide a destroy method to unbind all events and make sure no memory is still used, similar to jquery destroy:
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
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?
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.
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
Why not highlight matched text? For example, with a simple "strong" tag, or better with a custom class.
Thanks
Purposes :
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); }
Users of autocomplete systems have come to expect the following:
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 });
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
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
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
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.
Setup :
Use case :
What happen :
What is expected :
See : https://al-f.net/searx/?q=autocomplete-js (source code)
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
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!
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();
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).
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..
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.
event.preventDefault();
should be inside the
if (liActive !== null) {
condition.
Scenario :
Then the enter key is ignored because some choices are shown.
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).
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")?
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().
Wait until user stop typing. Like here http://stackoverflow.com/a/7849308/4559221
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
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
I need to send query params to specify the values expected in response.
For example "values":"name" .
How can I do that?
_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.
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
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
(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...)
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
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">(555) 555-1212</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
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.