Bootstrap - показать все элементы Typeahead в фокусе

Я хотел бы показать все элементы Typeahead, когда текст-ввод (id = "Вопросы" ) получает фокус. Как я могу это сделать?

JavaScript:

function SetTypeahead() {
    $("#Questions").typeahead({
        minLength: 0,
        source: [
                "Q1?",
                "Q2?",
                "Q3?",
                "@4?"
        ]
    });
}

Ответ 1

Получите последнюю версию bootstrap plug-in-plugin v2.1.2 в https://raw.github.com/michaelcox/bootstrap/6789648b36aedaa795f1f5f11b4da6ab869f7f17/js/bootstrap-typeahead.js

Это обновление позволит minLength для включения нуля показывать все для 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"]    
                    });

Затем вам нужно прикрепить событие onFocus к вашему элементу, потому что он не определен плагином:

$("#typeaheadField").on('focus', $("#typeaheadField").typeahead.bind($("#typeaheadField"), 'lookup'));

Это также хорошая идея перезаписать класс bootstrap typeahead css локально, чтобы установить максимальную высоту и вертикальную прокрутку для результатов в случае, если слишком много результатов.

.typeahead {
max-height: 200px;
overflow-y: auto;
overflow-x: hidden;
}

Ответ 2

Есть решение для этого на gbbb bootstrap: ~~https://github.com/twitter/bootstrap/pull/5063~~

Изменить: эта ссылка мертва, используйте ссылку, которую написал Andrew: https://github.com/ptnplanet/Bootstrap-Better-Typeahead

Ответ 3

Отметьте запрос на перенос из theofraim typeahead, он включил эту функциональность, но ее еще нельзя объединить.

Ответ 4

Последняя версия v3.1.0 для typeahead имела явную опцию

showHintOnFocus:true

Ответ 5

Существует закрытый вопрос об этом на typeahead github по следующей ссылке: https://github.com/twitter/typeahead.js/issues/462

Вы узнаете, что, как описано jharding:

"typeahead.js предназначен для дополнения ящиков поиска, которые питаются от всех целей и задач бесконечным набором данных. Предлагаемая здесь функциональность не очень подходит для того, что мы хотим, чтобы typeahead.js был.

Хотя предыдущее сообщение по цене показывает, как вы можете его реализовать.

Вы также можете перейти к более поздней версии https://github.com/bassjobsen/Bootstrap-3-Typeahead

Ответ 6

Вот мое решение:

Идентификатор типа

$( "# FinalGrades", контекст).typeahead({ minLength: 0, предметы: 10, scrollBar: true, источник: finalGrades });

Событие с текстовым полем триггера

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

Ответ 7

Для меня $viewValue был нулевым при выборе, который препятствовал отображению списка. Мое решение состояло в том, чтобы установить фильтр в пустую строку, когда $viewValue имеет значение 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"/>

Ответ 8

Получить последнюю версию (bootstrap3-typeahead.js v4.0.2) script из Github: Загрузить

Код HTML:

<input data-provide="typeahead" id="q" type="text" value="" />

Рабочий 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
});

Официальный документ: Bootstrap-3-Typeahead