Bootstrap - show all Typeahead items on focus

B

10

21

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

Bader answered 10/10, 2012 at 20:7 Comment(3)

So, what's your question? What doesn't work? – Flatfoot 10/10, 2012 at 20:13

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 – Bader 10/10, 2012 at 20:20

@JohnSaunders - Hi John, about the articles above, I dont understand how to implement this code: $input.on('focus', $input.typeahead.bind($input, 'lookup'))); – Bader 10/10, 2012 at 20:30

C

17

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

Crista answered 19/12, 2012 at 0:13 Comment(1)

Work for me (bootstrap-typeahead.js v2.3.2) but when I try to click the scrollbar typeahead disappear. – Ideologist 27/4, 2014 at 20:26

L

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

Ludendorff answered 28/7, 2017 at 14:37 Comment(3)

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... – Maryland 4/10, 2018 at 7:20

Hi @Sam, for the scrollable you can check this #33566299 link and for the Auto select Input value from the data available, it comes automatically when the user stops the typing on input. – Ludendorff 5/10, 2018 at 18:15

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? – Maryland 6/10, 2018 at 5:40

S

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

Sundog answered 20/2, 2017 at 18:35 Comment(0)

M

1

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

Misprision answered 26/10, 2012 at 19:38 Comment(2)

This is the project I used (linked on that pull request): github.com/ptnplanet/Bootstrap-Better-Typeahead – Bluet 25/7, 2013 at 15:58

The link you've provided is dead. – Klimt 11/9, 2013 at 12:6

W

1

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.

Whitver answered 12/12, 2020 at 6:35 Comment(0)

K

0

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

Komara answered 3/1, 2014 at 7:57 Comment(0)

A

0

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

showHintOnFocus:true

Asis answered 23/7, 2015 at 8:22 Comment(1)

What is the URL to the project? The link I see the GitHub only goes to version 0.11: github.com/twitter/typeahead.js – Noddy 15/12, 2016 at 21:24

C

0

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

Concordance answered 14/1, 2016 at 9:54 Comment(0)

T

0

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

Trencherman answered 29/7, 2016 at 10:27 Comment(0)

G

0

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

Gilder answered 8/10, 2018 at 21:36 Comment(0)

Recommended topics

Hot tags