autocomplete - template - typeahead bootstrap 4
¿Enviar la selección en Bootstrap typeahead() autocompletar? (6)
Al parecer, hay algunas solicitudes de fusión git. Éste hace el trabajo y le permite enviar una serie de objetos a typeahead: https://github.com/twitter/bootstrap/pull/1751
¿Cómo presento automáticamente la selección hecha con Twitter Bootstrap typeahead ()?
http://twitter.github.com/bootstrap/javascript.html#typeahead
He añadido una devolución de llamada blur en la entrada. Tenga en cuenta que debe esperar un breve periodo de tiempo, que typeahead puede cambiar el valor en la entrada y que antes no se llama la devolución de llamada de blur . Es solo una solución, pero funciona.
$(''input.myTypeaheadInput'').blur(function(e) {
window.setTimeout(function() {
window.console && console.log(''Works with clicking on li item and navigating with the keyboard. Yay!'');
}, 50);
});
Para rellenar un valor de un campo oculto en un formulario html de la selección de datos de typeahead, hice lo siguiente:
$(''#prefetch'').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: ''trees'',
source: trees,
limit: 15
}).on(''typeahead:selected'', function(e) {
var result = $(''#prefetch'').val()
$(''#formpane input[name=/"myID/"]'').val(result)
});
Para referencia, aquí está el código html:
<body>
<div id="formpane">
<form action="/thanks" method="POST">
<input class="typeahead" type="text" placeholder="select categories" id="prefetch">
<button type="submit">Submit</button>
<input type="hidden" name="myID" />
</form>
</div>
<script type="text/javascript" src="js_file_above.js"></script>
</body>
Puede que no sea la mejor solución, pero simplemente probé esto en mi configuración de typeahead localmente y funcionó.
Si tu typeahead se ve algo como esto ...
<form id="test-form" method="post" action="">
<input id="test-input" type="text" data-provide="typeahead"
data-source=''["1","2'',"3"]'' />
</form>
Entonces puedes enviarlo con este javascript.
<script type="text/javascript">
$(''#test-input'').change(function() {
$(''#test-form'').submit();
});
</script>
Si usa el complemento externo typeahead.js (recomendado para Bootstrap 3):
Para activar un formulario al seleccionar solo use los eventos personalizados.
$(''#my-input'')
.typeahead({/* put you options here */})
.on(''typeahead:selected'', function(e){
e.target.form.submit();
});
Más información sobre eventos personalizados here y demostración sobre JSfiddle .
Hay una forma limpia utilizando la devolución de llamada updater :
input.typeahead({
''source'' : [''foo'', ''bar''],
''updater'' : function(item) {
this.$element[0].value = item;
this.$element[0].form.submit();
return item;
}
});
Cuando el usuario selecciona una opción (ya sea con un clic del mouse o con un teclado), la devolución de llamada llena el cuadro de entrada y envía el formulario.