Bootstrap – show all Typeahead items on focus

Bootstrap – show all Typeahead items on focus

I’d like to show all Typeahead items when the text-input (id=”Questions”) get focus.
How can I do it?
function SetTypeahead() {
minLength: 0,
source: [


Solution 1:

Get the latest bootstrap typeahead plugin v2.1.2 at

This update will allow minLength of zero to enable show all for typeahead

<input id="typeaheadField" name="typeaheadField" type="text" placeholder="Start Typing">

                        minLength: 0,
                        items: 9999,
                        source: ["Alabama","Alaska","Arizona","Arkansas","California","Colorado", "Oregon"]    

Then you have to attach the onFocus event to your element, because it’s not defined by the plugin:

$("#typeaheadField").on('focus', $("#typeaheadField").typeahead.bind($("#typeaheadField"), 'lookup'));

it’s a also a good idea to overwrite the bootstrap typeahead css class locally to set max-height and vertical scroll for the results in case there are too many results.

.typeahead {
max-height: 200px;
overflow-y: auto;
overflow-x: hidden;

Solution 2:

For me, the $viewValue was null upon selection which was preventing the list from displaying. My solution was to set the filter to an empty string when $viewValue was null.

<input type="text"
  uib-typeahead="gear as gear.Name for gear in gears | filter:$viewValue || ''"

Solution 3:

Get the latest version (bootstrap3-typeahead.js v4.0.2) script from Github: Download

Html Code:

<input data-provide="typeahead" id="q" type="text" value="" />

Working JavaScript:

// autocomplete input text
    // your json data source
    source: [your json or object here],
    // on click list option set as text value
    autoSelect: true,
    // set minlength 0 to show list on focus
    minLength: 0,
    // set no of items you want here
    items: 20,
    // set true if want to list option on focus
    showHintOnFocus: true

Official Document: Bootstrap-3-Typeahead

Related:  Dynamically position Bootstrap tooltip (for dynamically generated elements)

Solution 4:

There is a solution to this over on the bootstrap github:

Edit: That link is dead, use the link that Andrew posted:

Solution 5:

Check this pull request from theophraim’s typeahead, he has included this functionality, but it is yet to be merged.

Solution 6:

The last version v3.1.0 of typeahead had an explicit option