Bootstrap Autocomplite plugins

Question

I'm trying to find some Bootstrap Autocomplete plugin, to make autocomplete by cities. For exemple I have such arrow:

 {
   ['Alabama','USA'],
   ['Alaska','USA'],
   ['London','UK'],
   ['Kiev','Ukraine'],
 }

and make searching by first letters of city string(country don't take). The most nice plugin that I've found: https://twitter.github.io/typeahead.js/examples/

But in it searching goes by all entered symbols.

So:

• i'm looking for autocomplete by name of city by first symbols, and shows with country;

• if I wrote "Al", select box must show:

Al abama, USA

Al aska, USA

with highlited "Al".

---

Maybe will be good idea change arrow to strings like:

['Alabama, USA', 'Alaska, USA', 'London, UK','Kiev, Ukraine']

?

Answer 1

I think what you are looking for is select2 : https://select2.github.io/

You can check out the example here : https://select2.github.io/examples.html

You may also want to arrange your array to something like this:

{
  ['Alabama, USA'],
  ['Alaska, USA'],
  ['London, UK']
}

Answer 2

I have been using MagicSuggest pluggin since years. Very easy to manage, it will provides you auto suggestion and auto select too.Plenty of options are available.

Please have a look at MagicSuggest demo .

For documentation see here

Have a look on sample codes

To download please go to GitHub

As per my understanding it might help you. If you found any difficulties feel free to ask.

Thanks