Bootstrap Typeahead: rimuove la selezione forzata del primo elemento

Question

Ciao Sto usando typeahead in twitter bootstrap. Quello che ho trovato qui è che nel menu a discesa di completamento automatico, seleziona la prima opzione per impostazione predefinita. Il mio requisito è che inizialmente non dovrebbe essere selezionato nulla, va alla prima opzione solo quando premo il tasto di navigazione (su o giù) o quando passo il mouse su di esso. È possibile utilizzare typeahead.

Answer 1

C'è il più potente typeahead project da Twitter che non ha questo problema. Non capisco perché questo progetto non sia incluso direttamente in Twitter Bootstrap.

È possibile vedere here some examples.

Answer 2

Anche se non esattamente quello che si chiede, c'è una soluzione alternativa here. Fondamentalmente, si effettua il testo che viene inserito dall'utente nel primo suggerimento typeahead. Come cita la risposta collegata, questo è lo stesso comportamento che si ottiene dalla barra degli indirizzi di Chrome.

Answer 3

È possibile sovrascrivere il metodo di rendering typeahead bootstrap per ottenere ciò. La linea items.first().addClass('active') dal plug-in originale typeahead verrà rimossa in questa sostituzione.

$.fn.typeahead.Constructor.prototype.render = function(items) { 
    var that = this 

    items = $(items).map(function (i, item) { 
     i = $(that.options.item).attr('data-value', item) 
     i.find('a').html(that.highlighter(item)) 
     return i[0] 
    }) 

    this.$menu.html(items) 
    return this 
}; 

Answer 4

1-Aperte bootstrap-typeahead.js e commentare items.first(). AddClass ('attivo')

render: function (items) { 
    var that = this 

    items = $(items).map(function (i, item) { 
    i = $(that.options.item).attr('data-value', item) 
    i.find('a').html(that.highlighter(item)) 
    return i[0] 
    }) 

// items.first().addClass('active') 
    this.$menu.html(items) 
    return this 
} 

Answer 5

per evitare di selezione prima opzione typeahead di default, I parametro utilizzato in documenti ufficiali: autoSelect. Di default è impostato su 'true'

Il mio codice:

$('#searchString', this.el).typeahead({ 
     source: function (query, process) { 
      var q = '/autocompleteSearch?searchString=' + query;    

      return $.get(q, function (data) { 
       return process(data); 
      }); 
     }, 
     minLength: 3, 
     autoSelect: false 
    }); 

Answer 6

ho trovato una soluzione here che funziona con l'aggiunta di questa prima:

var newRender = function(items) { 
    var that = this 

    items = $(items).map(function (i, item) { 
     i = $(that.options.item).attr('data-value', item) 
     i.find('a').html(that.highlighter(item)) 
     return i[0] 
    }) 

    this.$menu.html(items) 
    return this 
}; 
$.fn.typeahead.Constructor.prototype.render = newRender; 

$.fn.typeahead.Constructor.prototype.select = function() { 
    var val = this.$menu.find('.active').attr('data-value'); 
    if (val) { 
     this.$element 
     .val(this.updater(val)) 
     .change(); 
    } 
    return this.hide() 
}; 

che sostituisce il typeahead bootstrap di non inizialmente seleziona qualcosa