How do you implement custom autocomplete list in html?

Question

I am trying to understand a simple auto-search result textbox.

Now, I have setup javascript events to make the ajax call and fetch the search result from the server, as the user types a string in the textbox, and store it in an array. So, I have a javascript array that contains my search result.

 var searchResult = [
 "Accordion Company",
 "A Little Mouse",
 "Another Time",
 "ASIO"
 ];

I want to attach this list to some property(or something else) of the textbox so that my list appears as a dropdown as the user types.

Does a textbox even allow that? What HTML control/property allows the autocomplete list to appear?

Background:

1) I have worked with jQueryUI and all of this can be achieved very easily there. I am interested in learning how is the inherent property of a textbox overriden to show the autocomplete result? If I strip down everything to simple HTML and javascript how is this achieved? Or is it just an HTML/CSS trick that looks like a dropdown

2) I have looked into vCard too but couldn't figure out how will I override a vCard array with my javascript array that contains the search result.

Just trying to understand whether I can tell my INPUT type="text" control to show a custom autocomplete list.

Thanks!

jQuery UI creates a dom UL element and then just positions it relative to the input container, to make it appear under it as a drop down. It is NOT a real HTML select/drop down element. I'm not sure what vCards has to do with this question.... — BReal14
– BReal14, Commented Aug 27, 2014 at 14:39
@briansol Thanks for your answer. I am now clear that jQuery created another control to show the autocomplete list. — avroshk
– avroshk, Commented Aug 28, 2014 at 9:28
@briansol I mentioned vCard for this reason - Most browsers support an autocomplete form option. For example, when I login to gmail using my username and submit, it remembers my id when I try to login again some other time and shows this in a dropdown. I read that these values are stored in vCards. I was wondering, here, there is no jQuery implementation(or any other website specific code) but still the browser is able to show a dropdown list below the textbox. How can we make use of this list instead. I am not sure if I'm clear here. I can explain further, please let me know. — avroshk
– avroshk, Commented Aug 28, 2014 at 9:34
I'm not aware of the autocomplete information being stored in a vCard (it may be, I don't know). That information is built into the core browser functionality, it is not part of the website itself. The only options we have are to DISABLE autocomplete on fields with flagging it as <input .... autocomplete="off"> IE may use vcards, but i know firefox actually stores info in the Roaming appdata folder, so again, it's a browser by browser case. — BReal14
– BReal14, Commented Aug 28, 2014 at 14:18

Musa · Accepted Answer · 2014-08-27 14:36:40Z

2

There is the list attribute and the associated datalist tag

<input list="things">
<datalist id="things">
  <option value="Some">
  <option value="No">
  <option value="Any">
</datalist>

You can take your array and build a datalist element.
datalist is html5 so support might be a problem.

answered Aug 27, 2014 at 14:36

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How do you implement custom autocomplete list in html?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related