How implement auto-fill in input form

Question

I have an ArrayList<String> products where i load them to an input text

<select class="form-control">
  <option id="AL9001">AL9001</option>
  <option id="AV8932">AV8932</option>
  <option id="BVE0932">BVE0932</option>
  etc...
</select>

the size of the ArrayList is quite big (2000 elements) so it's not so easy to scroll down 2000 elements to find what you want.. How can I implement an auto-fill fuctionality, where the user starts write sth and the possible elements are shown.. I searched and I found only an html attribute autocomplete where it doesn't work for my case..

One other solution I found is solr where it may fit as my project is build with Tomcat and jsps.. Is there any other way to implement this?

Answer 1

Use either the datalist HTML5 element, or the jQuery-ui autocomplete widget (if you need to support old browsers). I would also suggest to validate the input before submit, as both datalist and autocomplete work only for <input> and not for <select> , so the user can type anything there. (Not mentioning the obvious server-side validation of the submitted values.)