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?
Javascript:
function SetTypeahead() {
$(“#Questions”).typeahead({
minLength: 0,
source: [
“Q1?”,
“Q2?”,
“Q3?”,
“@4?”
]
});
}

Solutions/Answers:

Solution 1:

Get the latest bootstrap typeahead plugin v2.1.2 at https://raw.github.com/michaelcox/bootstrap/6789648b36aedaa795f1f5f11b4da6ab869f7f17/js/bootstrap-typeahead.js

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

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

$("#typeaheadField").typeahead({
                        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"
  ng-model="gear.Value"
  uib-typeahead="gear as gear.Name for gear in gears | filter:$viewValue || ''"
  typeahead-show-hint="true"
  typeahead-min-length="0"
  typeahead-show-hint="true"
  typeahead-editable='false'
  typeahead-focus-first='false'
  class="form-control"
  name="gear"
  ng-required="true"/>

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
$('#q').typeahead({
    // 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:
https://github.com/twitter/bootstrap/pull/5063

Edit: That link is dead, use the link that Andrew posted: https://github.com/ptnplanet/Bootstrap-Better-Typeahead

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

showHintOnFocus:true

References