javascript/html autocomplete textbox

Question

I am developing a web page which has a requirement of many autocomplete textboxes. As I am new to javascript, it is very tough for me to make my own autocomplete textbox. So I have searched many examples from the internet, but they only work for a single textbox. This means I cannot use the same js file to make another autocomplete textbox. I didn't find any such examples on stackoverflow either. Can someone help me in this?

Answer 1

Here's a solution to create autocomplete with No JQUERY or No JAVASCRIPT.. just plain html5 an input box and a datalist tag..

lean more about it here

<input type="text" id="txtAutoComplete" list="languageList" />
<!--your input textbox-->
<datalist id="languageList">
    <option value="HTML" />
    <option value="CSS" />
    <option value="JavaScript" />
    <option value="SQL" />
    <option value="PHP" />
    <option value="jQuery" />
    <option value="Bootstrap" />
    <option value="Angular" />
    <option value="ASP.NET" />
    <option value="XML" />
</datalist>

Answer 2

Use JQuery with the AutoSuggest plugin.

http://docs.jquery.com/Plugins/autocomplete

Include the JS libraries (see the documentation above), then do this in HTML:

<input type="text" class="autocomplete" name="n1" />
<input type="text" class="autocomplete" name="n2" />
<input type="text" class="autocomplete" name="n3" />
<input type="text" class="autocomplete" name="n4" />

Then add an Autocomplete to the CSS-class in your Javascript:

var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
$(".autocomplete").autocomplete(data);