Datalist not bound to text field while scrolling webpage

Question

I want a text box that also has a drop down menu. It should also be able to search from drop-down lists. The code below satisfies the above requirement, but when the page scrolls down, the drop-down menu moves with the page instead of being attached to a text box.

<datalist id="browsers" style="overflow-x: hidden; overflow: scroll; width: 100%; height:500px"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input list="browsers" name="browser"> 

Answer 1

Why don't you use Chosen ? Chosen really effective for this purpose. You can not only search inside the drop-down list, but also select multiple items at the same time.

Look at her in JsFiddle