Add autocomplete to Wide Searchbar in Bootstrap 3

Question

I have been spending the past few days in what I thought was a very simple task: Have an autocomplete feature for a search bar in Bootstrap 3. What I am trying to achieve is to integrate it into the Bootstrap 3 design without breaking the layout.

I have looked into ways to use both twitter-typeahead.js and bootstrap3-typeahead..

Part of the difficulty may be that I wanted to have a large searchbox as part of the 'navbar-fixed' element, I used this solution / workaround:

https://stackoverflow.com/questions/18552714/bootstrap-3-how-to-maximize-input-width-inside-navbar

The challenge that I have is that whenever I include the typeahead class, the style of the seach bar changes back to a different css style, breaking the layout. I then attempted the same using autocomplete.js.

The actual level of autocomplete functionality is very trivial at this point, I only want to match the exact string so I do not care about the exact implementation - my only requirement is: (1) Typeahead/autocomplete and (2) Keep the wide search bar in a Bootstrap navbar searchbar

Anyone has an idea how to achieve this?

Thank you Amal, this fixed the issue! Can you explain why the issue occurs and how it's in the fiddle fixes this? Again, many thanks! — col. slade, May 21 '17 at 22:29
Hi,col. slade.it works fine if you added typeahead.js only.But when adding typeahead.bundle.js and bootstrap-tagsinput.min.js the searchbox gets broken.see this https://plnkr.co/edit/nnDcPgWAmrizkbTP5iBp?p=preview — Amal, May 22 '17 at 02:52

score 1 · Accepted Answer · answered May 22 '17 at 02:44

Try this code

var indicator=["aaa","abc","def","rrr","yyyt"];
function searchautocomplete(itemclass,data){
      $(itemclass).typeahead({
                  hint: true,
                  highlight: true,
                  source:data,
                  limit:data.length
      });
}
searchautocomplete(".form-control",indicator);

DEMO

Add autocomplete to Wide Searchbar in Bootstrap 3

1 Answers1