javascript - autocomplete bootstrap jquery

Twitter Bootstrap TypeAhead para trabajar como DropDown List/Select Tag con función Autocompletar

Question

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

1. Agregar un botón desplegable al componente de cabecera de arranque de Twitter

Answer 1

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)

Answer 2

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/

Answer 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('''');
});

});

http://jsfiddle.net/d4kris/5rtGA/3/