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

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

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

回答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

回答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

回答5:

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

回答6:

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

showHintOnFocus:true

回答7:

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

回答8:

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('');
  });
  

回答9:

WORKS For bootstrap-3-typeahead, the easiest is just to simulate a keyup with backspace (chr8) on focus.

$("#people_lookup").typeahead({
    source: people_list,
    minLength: 0
}).on('focus', function() {
    $(this).trigger(jQuery.Event('keyup', {which: 8}));
});