javascript - autocomplete bootstrap jquery
Twitter Bootstrap TypeAhead para trabajar como DropDown List/Select Tag con función Autocompletar (3)
Acabo de encontrar este asombroso complemento que convierte un elemento SELECT estándar en un cuadro combinado muy bien cuidado con un estilo tipográfico de bootstrap. Se ve muy bien, lo voy a usar en mi próximo proyecto.
https://github.com/danielfarrell/bootstrap-combobox
Ejemplo en vivo (Bootstrap 3)
Quiero tener una lista desplegable / <Seleccionar> comportamiento de etiqueta HTML con la función Autocompletar utilizando Twitter Bootstrap TypeAhead. El enlace here logra la característica de Combo Box donde el usuario también puede proporcionar su propia entrada. Quiero restringir al Usuario para que seleccione solo de la opción provista. ¿Hay alguna manera de ajustar el complemento BootApp TypeAhead de Twitter para emular el comportamiento de DropDown List / Tag con la función Autocompletar?
He referido la siguiente pregunta antes de publicar
De hecho, es posible, incluso muy simple, sin cambiar el código de código de javascript / utilizando el código alterado, SI está dispuesto a no mostrar los resultados coincidentes resaltados.
HTML:
<input name="test" id="test"/>
<button id="emu-select" class="btn btn-small" type="button">
<i class="icon-arrow-down"></i>
</button>
guión:
$(document).ready(function() {
$("#test").typeahead({
"source": [''Pennsylvania'',''Connecticut'',''New York'',''Maryland'',''Virginia''],
//match any item
matcher : function (item) {
return true;
},
//avoid highlightning of "a"
highlighter: function (item) {
return "<div>"+item+"</div>"
}
});
// "select"-button
$("#emu-select").click(function(){
//add something to ensure the menu will be shown
$("#test").val(''a'');
$("#test").typeahead(''lookup'');
$("#test").val('''');
});
});
código de trabajo / ejemplo en jsfiddle http://jsfiddle.net/davidkonrad/ZJMBE/3/
Pequeña mejora en la respuesta de davidkonrads para mantener la funcionalidad de filtro al escribir.
$(document).ready(function() {
$("#test").typeahead({
"source": [''Pennsylvania'', ''Connecticut'', ''New York'', ''Maryland'', ''Virginia''],
//match any item
matcher: function(item) {
if (this.query == ''*'') {
return true;
} else {
return item.indexOf(this.query) >= 0;
}
},
//avoid highlightning of "*"
highlighter: function(item) {
return "<div>" + item + "</div>"
}
});
// "select"-button
$(".showAll").click(function(event) {
var $input = $("#test");
//add something to ensure the menu will be shown
$input.val(''*'');
$input.typeahead(''lookup'');
$input.val('''');
});
});