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

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

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

Solution 3

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 4

For me, working code looks like this:

var typeHeadField = $("#typeaheadField");
typeHeadField.typeahead({
                        minLength: 0,
                        items: 9999,
                        source: ["Alabama","Alaska","Arizona","Arkansas","California","Colorado", "Oregon"]    
                    });
typeHeadField.on('focus', function() {
 $(this).trigger('propertychange');
});

In other words, just trigger the event 'propertychange' on your desired event. And the Typehead autocomplete will open.

Solution 5

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

View more solutions

Comments

[John Saunders]

So, what's your question? What doesn't work?

[user1736062]

Hi John It works when I start to type, but not only on focus. The idea is to show all the options on focus. I read these articles, but have no success on suggestions: github.com/twitter/bootstrap/issues/2043 and github.com/twitter/bootstrap/pull/3941

[user1736062]

@JohnSaunders - Hi John, about the articles above, I dont understand how to implement this code: $input.on('focus', $input.typeahead.bind($input, 'lookup')));

[Andrew]

This is the project I used (linked on that pull request): github.com/ptnplanet/Bootstrap-Better-Typeahead

[Szymon Wygnański]

The link you've provided is dead.

[Zabaa]

Work for me (bootstrap-typeahead.js v2.3.2) but when I try to click the scrollbar typeahead disappear.

[raider33]

What is the URL to the project? The link I see the GitHub only goes to version 0.11: github.com/twitter/typeahead.js

[Sam]

Hi Neeraj, how do you make it scrollable? Also, when focus, how to automatically select one? For example, I have a list of countries. Say that in the text box is the value Thailand. When I click on the text box, it should went to Thailand right away. How to archive that? Thanks in advance...

[Nono]

Hi @Sam, for the scrollable you can check this stackoverflow.com/questions/33565799/… link and for the Auto select Input value from the data available, it comes automatically when the user stops the typing on input.

[Sam]

Hi Neeraj, I am using Bootstrap-3-Typeahead. I actually found that link, but it doesn't apply to Bootstrap-3-Typeahead. I assumed it is not for Bootstrap-3-Typeahead?