javascript - template - typeahead js bootstrap4
Manejar evento seleccionado en Twitter bootstrap Typeahead? (7)
De acuerdo con su documentation , la forma correcta de manejar el evento selected
es mediante el uso de este controlador de eventos:
$(''#selector'').on(''typeahead:select'', function(evt, item) {
console.log(evt)
console.log(item)
// Your Code Here
})
Quiero ejecutar la función javascript justo después de que el usuario seleccione un valor usando Twitter bootstrap Typeahead
Busco sobre algo como evento seleccionado
He creado una extensión que incluye esa característica.
La primera vez que publiqué una respuesta aquí (muchas veces encontré una respuesta aquí), así que aquí está mi contribución, espero que ayude. Deberías poder detectar un cambio. Prueba esto:
function bob(result) {
alert(''hi bob, you typed: ''+ result);
}
$(''#myTypeAhead'').change(function(){
var result = $(this).val()
//call your function here
bob(result);
});
Para obtener una explicación de cómo funciona typeahead para lo que desea hacer aquí, tome el siguiente código de ejemplo:
Campo de entrada HTML:
<input type="text" id="my-input-field" value="" />
Bloqueo de código JavaScript:
$(''#my-input-field'').typeahead({
source: function (query, process) {
return $.get(''json-page.json'', { query: query }, function (data) {
return process(data.options);
});
},
updater: function(item) {
myOwnFunction(item);
var $fld = $(''#my-input-field'');
return item;
}
})
Explicación:
- Su campo de entrada se establece como un campo de typeahead con la primera línea:
$(''#my-input-field'').typeahead(
- Cuando se ingresa texto, se activa la opción
source:
para buscar la lista JSON y mostrarla al usuario. - Si un usuario hace clic en un elemento (o lo selecciona con las teclas de cursor e ingresa), ejecuta la opción de
updater:
. Tenga en cuenta que aún no se ha actualizado el campo de texto con el valor seleccionado . - Puede tomar el elemento seleccionado utilizando la variable del
item
y hacer lo que quiera con él, por ejemplo,myOwnFunction(item)
. - He incluido un ejemplo de creación de una referencia al campo de entrada
$fld
, en caso de que quiera hacer algo con él. Tenga en cuenta que no puede hacer referencia al campo usando $ (esto) . - A continuación, debe incluir la línea de
return item;
dentro de la opciónupdater:
para que el campo de entrada se actualice realmente con la variable delitem
.
$(''.typeahead'').on(''typeahead:selected'', function(evt, item) {
// do what you want with the item here
})
$(''.typeahead'').typeahead({
updater: function(item) {
// do what you want with the item here
return item;
}
})
source: function (query, process) {
return $.get(
url,
{ query: query },
function (data) {
limit: 10,
data = $.parseJSON(data);
return process(data);
}
);
},
afterSelect: function(item) {
$("#divId").val(item.id);
$("#divId").val(item.name);
}