How to achieve autocomplete feature over HTML drop-down or select element?

Question

Hi I am trying to create auto completion functionality for a drop-down OR select html form element.

I need a functionality like once us

Answer 1

There are many options, I have used Selectize.js and Select2. I found Select2 is much better and easy to use, and light weight! Also very easy to update with ajax call (example: search city, country, user etc...)

link: http://selectize.github.io/selectize.js/

checkout the example below:

$(function() {
  $('select')
    .select2({
      placeholder: 'type now...',
      width: '200',
      multiple: true,
      data: [{
        id: 'A & A, LLC.',
        text: 'A & A, LLC.'
      }, {
        id: 'testing1',
        text: 'testing1'
      }, {
        id: 'testing 1,2,3',
        text: 'testing 1,2,3'
      }],
      tokenSeparators: ['|']
    })
    .on('change', function() {
      console.log($(this).val());
    });
});