Unable to set focus on an input of Twitter Bootstrap's Typeahead

问题

When I remove these attributes:

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

I am able to perform this:

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

This is my HTML markup for this:

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

NOTE: Typeahead works well an this it's nothing wrong with this:

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

回答1:

I recently had this issue. It fixed itself when I declared the .typeahead() code block first, and then gave the field focus. If I reversed the order, the .typeahead() functionality broke.

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

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

回答2:

typeahead has it's own version of focus method. Default behaviour is prevented of focus event so the only way is to keep typeahead reference.

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

then you just call typeaheadReference.focus();

回答3:

Don't ask me why, but this is the only thing that worked for me:

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

回答4:

Typeahead is actively blocking default focus event. I am not sure why (perhaps there is a use case where focus breaks typeahead, I haven't seen it).

In the typeahead.js source (at the end lines 316 to 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())
  })

Change to:

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

Returning true allows the focus event to complete (only runs this after first focus when typeahead is established) and removing the e.preventDefault() call allows focus to fire on initial setup.

I have a pull request in for the change - will update answer with authors' response.

回答5:

It depends on which version you are using, I bumped into this issue in 0.9.3.

Not the cleanest, but you can try to set a timeout:

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

回答6:

Using typeahead.js 0.10.2 the solution specified by Evil Closet Monkey almost worked for me. As specified, you have to set focus after the call to "typeahead", but keep in mind that the "typeahead" invocation will manipulate the DOM and add additional elements. After calling "typeahead", locate the element representing your input box and set focus to that. As shown below, the input element has the class "tt-input" assigned to it.

Example:

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

回答7:

Maybe the input is hidden.

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

回答8:

I created a jsfiddle for people to quickly test the version of the library http://jsfiddle.net/uryUP/

I realized another piece of my code was disabling my input box causing the focus to fail, but this helped me realize it was my code and not the library

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

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

回答9:

I end up using the click event instead of focus and it works for me.

来源：https://stackoverflow.com/questions/13625866/unable-to-set-focus-on-an-input-of-twitter-bootstraps-typeahead