Impossibile impostare lo stato attivo su un ingresso di typeahead di Twitter Bootstrap

Question

Quando ho rimuovere questi attributi:

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

sono in grado di eseguire questo:

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

Questo è il mio codice HTML per questo:

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

NOTA: typeahead funziona bene un questo non è niente di sbagliato w con questo:

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

Answer 1

Forse l'input è nascosto.

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

Answer 2

Typeahead sta bloccando attivamente l'evento di messa a fuoco predefinita. Non sono sicuro del perché (forse c'è un caso d'uso in cui la messa a fuoco si interrompe, non l'ho vista).

Nel typeahead.js source (le linee di fondo 316 a 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()) 
    }) 

Passa a:

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

Tornando vero permette l'evento di messa a fuoco per completare (funziona solo questo dopo la prima messa a fuoco quando typeahead is established) e la rimozione della chiamata e.preventDefault() consente di attivare la messa a fuoco durante l'installazione iniziale.

Ho un pull request per la modifica - aggiornerà la risposta con la risposta degli autori.

Answer 3

Recentemente ho avuto questo problema. Si è riparato da solo quando ho dichiarato il blocco di codice .typeahead() e poi ho messo a fuoco il campo. Se ho annullato l'ordine, la funzionalità .typeahead() si è interrotta.

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

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

Answer 4

Dipende da quale versione si sta utilizzando, mi sono imbattuto in questo problema in 0.9.3.

Non

il più pulito, ma si può provare a impostare un timeout:

setTimeout (function() {. $ ('Prima') messa a fuoco();}, 0);

Answer 5

Utilizzando typeahead.js 0.10.2 la soluzione specificata da Evil Closet Monkey ha funzionato quasi per me. Come specificato, devi mettere a fuoco dopo la chiamata a "typeahead", ma tieni presente che la chiamata "typeahead" manipolerà il DOM e aggiungerà ulteriori elementi. Dopo aver chiamato "typeahead", individua l'elemento che rappresenta la casella di input e imposta lo stato attivo. Come mostrato sotto, l'elemento di input ha la classe "tt-input" ad esso assegnata.

Esempio:

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 6

typeahead ha il propria versione del metodo di messa a fuoco. Il comportamento predefinito è impedito dall'evento di messa a fuoco, quindi l'unico modo è di mantenere un riferimento di tipo typeahead.

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

poi basta chiamare typeaheadReference.focus();

Answer 7

ho creato un jsfiddle per le persone per testare rapidamente la versione della libreria http://jsfiddle.net/uryUP/

ho realizzato un altro pezzo del mio codice è stato disabilitando la mia casella di input provocando la focus to fail, ma questo mi ha aiutato a capire che era il mio codice e non la libreria

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

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

Answer 8

Non chiedetemi perché, ma questo è l'unica cosa che ha funzionato per me:

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

Answer 9

finisco utilizzando l'evento click invece di messa a fuoco e funziona per me.