Bootstrap - show all Typeahead items on focus

Question

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?"
        ]
    });
}

Answer 1

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"/>

Answer 2

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

Answer 3

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

showHintOnFocus:true

Answer 4

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;
}

Answer 5

There is a closed issue about it on typeahead github at the following link: https://github.com/twitter/typeahead.js/issues/462

You will find out that, as described by jharding:

"typeahead.js is meant to complement search boxes that are powered by, for all intents and purposes, an infinite dataset. The sort of functionality proposed here isn't really a great fit for what we want typeahead.js to be. "

Though a previous message by pricey shows how you can implement it.

You can also go for more recent version https://github.com/bassjobsen/Bootstrap-3-Typeahead

Answer 6

Here is my solution:

• Init typeahead

  $("#FinalGrades", context).typeahead({ minLength: 0, items: 10, scrollBar: true, source: finalGrades });

• Trigger textbox event

  $("#FinalGrades", context).on("keyup focus", function (e) {
      var that = $(this);
      if (that.val().length > 0 || e.keyCode == 40 || e.keyCode == 38) return;
      that.select();
      var dropDown = that.next('.dropdown-menu');
      dropDown.empty();
      $("#FinalGrades", context).val(qualificationNames[0]);
      that.trigger('keyup');
      $.each(finalGrades, function (index, value) {
          var item = '<li data-value="' + value + '" class=""><a href="#">' + value + '</a></li>';
          dropDown.append(item);
      });
      that.val('');
  });