javascript - template - typeahead js bootstrap4

Manejar evento seleccionado en Twitter bootstrap Typeahead?

Question

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

Answer 1

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
})

Answer 2

He creado una extensión que incluye esa característica.

https://github.com/tcrosen/twitter-bootstrap-typeahead

Answer 3

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);
});

Answer 4

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:

1. Su campo de entrada se establece como un campo de typeahead con la primera línea: $(''#my-input-field'').typeahead(
2. Cuando se ingresa texto, se activa la opción source: para buscar la lista JSON y mostrarla al usuario.
3. 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 .
4. Puede tomar el elemento seleccionado utilizando la variable del item y hacer lo que quiera con él, por ejemplo, myOwnFunction(item) .
5. 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) .
6. A continuación, debe incluir la línea de return item; dentro de la opción updater: para que el campo de entrada se actualice realmente con la variable del item .

Answer 5

$(''.typeahead'').on(''typeahead:selected'', function(evt, item) {
// do what you want with the item here
})

Answer 6

$(''.typeahead'').typeahead({
updater: function(item) {
// do what you want with the item here
return item;
}
})

Answer 7

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);
}