無法將注意力集中在Twitter Bootstrap的Typeahead輸入上

Question

當我刪除這些屬性時：

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

Answer 1

我最近有這個問題。 當我首先聲明.typeahead()代碼塊然后給出字段焦點時，它自行修復。 如果我顛倒了訂單， .typeahead()功能就會破壞。

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

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

Answer 2

typeahead擁有自己的焦點方法版本。 禁止焦點事件的默認行為，因此唯一的方法是保持typeahead引用。

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

然后你只需要調用typeaheadReference.focus();

Answer 3

不要問我為什么，但這是唯一對我有用的東西：

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

Answer 4

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允許焦點事件完成（僅在建立e.preventDefault()輸入后第一次焦點后運行）並且刪除e.preventDefault()調用允許焦點在初始設置時觸發。

我有一個拉動請求進行更改 - 將更新答案與作者的回復。

Answer 5

這取決於您使用的是哪個版本，我在0.9.3中遇到了這個問題。

不是最干凈的，但你可以嘗試設置超時：

setTimeout（function（）{$（'。first'）。focus（）;}，0）;

Answer 6

使用typeahead.js 0.10.2 Evil Closet Monkey指定的解決方案幾乎為我工作。 按照規定，您必須在調用“typeahead”之后設置焦點，但請記住“typeahead”調用將操縱DOM並添加其他元素。 調用“typeahead”后，找到代表輸入框的元素並將焦點設置為該元素。 如下所示，input元素具有分配給它的類“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();

Answer 7

也許輸入是隱藏的。

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

Answer 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');

Answer 9

我最終使用click事件而不是焦點，它對我有用。