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拥有自己的焦点方法版本。禁止焦点事件的默认行为，因此唯一的方法是保持预先引用。

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

然后你只需拨打typeaheadReference.focus();

Answer 3

Typeahead正在主动阻止默认焦点事件。我不确定为什么（也许有一个用例焦点打破了类型，我还没有看到它。）

在typeahead.js source（最后一行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()调用允许焦点在初始设置时触发。

我有一个pull request用于更改 - 将更新答案与作者的回复。

Answer 4

不要问我为什么，但这是唯一对我有用的东西：

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

Answer 5

这取决于您使用的是哪个版本，我在0.9.3中遇到了这个问题。

不是最干净的，但您可以尝试设置超时：

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

Answer 6

使用typeahead.js 0.10.2 Evil Closet Monkey 指定的解决方案几乎为我工作。按照规定，你必须在调用＆＃34; typeahead＆＃34;之后设置焦点，但要记住＆＃34;预先输入＆＃34;调用将操纵DOM并添加其他元素。在调用＆＃34; typeahead＆＃34;之后，找到代表输入框的元素并将焦点设置为该元素。如下所示，输入元素具有类＆＃34; tt-input＆＃34;分配给它。

示例：

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

我最终使用点击事件而不是焦点，它对我有用。

无法将注意力集中在Twitter Bootstrap的Typeahead输入上

9 个答案: