Twitter Bootstrap TypeAhead para trabajar como DropDown List/Seleccionar etiqueta con función Autocompletar

Question

Quiero tener un DropDown List/< Seleccione> Comportamiento de etiqueta HTML con función Autocompletar utilizando Twitter Bootstrap TypeAhead. El enlace here logra la característica de Combo Box donde el usuario puede proporcionar su propia entrada también. Quiero restringir al usuario para que seleccione solo de la opción provista. ¿Hay alguna forma de utilizar el complemento de Twitter Bootstrap TypeAhead para emular el comportamiento de DropDown List/Tag con la función Autocompletar?

me he referido a la pregunta siguiente antes de publicar

1. Adding a dropdown button to Twitter bootstrap typeahead component

Answer 1

Eso es de hecho posible - incluso muy simple - sin cambiar el javascript typeahead/utilizando el código alterado, SI que está dispuesto 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 2

mejora Tiny a davidkonrads responder a mantener la funcionalidad del 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/

Answer 3

Acabo de encontrar este plugin increíble que convierte un elemento SELECT estándar en muy transparente cuadro combinado muy bien labrado usando typeahead de arranque. Se ve muy bien, voy a usarlo en mi próximo proyecto.

https://github.com/danielfarrell/bootstrap-combobox

Live Example (Bootstrap 3)