Невозможно установить фокус на ввод Twitter Bootstrap Typeahead

Когда я удалю эти атрибуты:

data-source="<?=str_replace('"', '&quot;', json_encode($equipment, JSON_HEX_TAG | JSON_HEX_APOS)); ?>" data-items="4" data-provide="typeahead"

Я могу выполнить это:

$(document).ready(function() {
    $('.first').focus();
});

Это моя разметка HTML для этого:

<div class="itemx">
    <input type="text" class="input-large first" autocomplete="off" placeholder="Equipment Name/Label" name="equip[]" data-source="<?=str_replace('"', '&quot;', json_encode($equipment, JSON_HEX_TAG | JSON_HEX_APOS)); ?>" data-items="4" data-provide="typeahead" />
    <input type="text" class="input-large second" placeholder="Quantity" name="quant[]" />
</div>

ПРИМЕЧАНИЕ: Typeahead хорошо работает, и это ничего плохого в этом:

data-source="<?=str_replace('"', '&quot;', json_encode($equipment, JSON_HEX_TAG | JSON_HEX_APOS)); ?>"

Ответы

Ответ 1

У меня недавно была эта проблема. Он зафиксировал себя, когда я сначала объявил блок кода .typeahead(), а затем дал фокус поля. Если я изменил порядок, функция .typeahead() сломалась.

$('#myField').typeahead({
    ...
});

$('#myField').focus();

Ответ 2

typeahead имеет собственную версию метода фокуса. Поведение по умолчанию предотвращено событием фокуса, поэтому единственный способ - сохранить ссылку на тип.

var typeaheadReference = $('.typeahead').typeahead({ ... };

то вы просто вызываете typeaheadReference.focus();

Ответ 3

Typeahead активно блокирует событие фокуса по умолчанию. Я не уверен, почему (возможно, есть прецедент, когда фокус прерывает typeahead, я его не видел).

В источнике typeahead.js (в концевых строках с 316 по 321):

  $(document).on('focus.typeahead.data-api', '[data-provide="typeahead"]', function (e) {
    var $this = $(this)
    if ($this.data('typeahead')) return
    e.preventDefault()
    $this.typeahead($this.data())
  })

Изменить на:

  $(document).on('focus.typeahead.data-api', '[data-provide="typeahead"]', function (e) {
    var $this = $(this)
    if ($this.data('typeahead')) return true
    $this.typeahead($this.data())
  })

Возврат true позволяет завершить фокусное событие (выполняется только после первого фокуса при установлении typeahead), и удаление вызова e.preventDefault() позволяет фокусу запускаться при начальной настройке.

У меня есть pull request для изменения - будет обновлять ответ с ответом авторов.

Ответ 4

Не спрашивайте меня, почему, но это единственное, что сработало для меня:

setTimeout("$('[name=search_input]').focus();", 0)

Ответ 5

Возможно, ввод скрыт.

$('input:visible').focus();

Ответ 6

Это зависит от того, какую версию вы используете, я столкнулся с этой проблемой в 0.9.3.

Не самый чистый, но вы можете попробовать установить тайм-аут:

setTimeout (function() {$ ('. first'). focus();}, 0);

Ответ 7

Используя typeahead.js 0.10.2, решение, указанное Evil Closet Monkey, почти сработало для меня. Как указано, вы должны установить фокус после вызова "typeahead" , но имейте в виду, что вызов "typeahead" будет манипулировать DOM и добавлять дополнительные элементы. После вызова "typeahead" найдите элемент, представляющий поле ввода, и установите фокус на это. Как показано ниже, входной элемент имеет назначенный ему класс "tt-input".

Пример:

HTML:

<div id="levelSearchBox" style="clear: both">
    <input class="typeahead" type="text" placeholder="Search" data-bind="value: selectedRootLevel" />
</div>

JS:

    $('#levelSearchBox .typeahead').typeahead({
        hint: true,
        highlight: true,
        minLength: 0,
        autoselect: true
    }, {
        displayKey: 'name',
        source: levels.ttAdapter()
    }).on('typeahead:selected', function ($e, datum) {
        selectedCallBack(datum["name"]);
    });

    $('#levelSearchBox .tt-input').focus();

Ответ 8

Я создал jsfiddle для быстрого тестирования версии библиотеки http://jsfiddle.net/uryUP/

Я понял, что еще один фрагмент моего кода отключил окно ввода, в результате чего фокус потерпел неудачу, но это помогло мне понять, что это мой код, а не библиотека

$('#locationSearchText').typeahead({
            minLength: 1,
            highlight: true
        },
        {
            source: function (query, process) {
                return process([{value:'abcdefg'}]);
            }
        });

$('#locationSearchText').focus().typeahead('val', 'abc');

Ответ 9

В конечном итоге я использую событие click вместо фокуса, и оно работает для меня.