Question

I’m trying to create a dropdown list with ‘select’ html tag , however , this made the input box impossible to edit.

  <select name="blabla" id="search_container">
    <option>blabla</option>
    ...
  </select>

So i added an preceding input:

<input type=text value="" onkeyup="searchFilter()"> Search </input>

And when user input anything inside that box , searchFilter() will fire, returns a set of <option> , overrides search_container.

But this makes the interface looks bad , i got two horizontal box here , but i did see many websites holds only one box , when user inputs , a list of option drops down , and you just pick one.

Thanks for any responses here.

@update , the term is called ‘autocomplete’ , and my problem is resolved. Thanks all

Answer 1

I assume you are talking about combobox with autocomplete – the one that allows typing in it an provides a list of options like so:

or this:

?

This is something that is quite complicated to achieve in pure JavaScript (although possible) and is normally achieved by using third-party JavaScript framework, that provides these out of the box.

You can take a look at the following JavaScript frameworks:

Dojo

jQueryUI(perhaps requires a plugin)

ExtJS