type template ejemplos bootstrap4 bootstrap javascript jquery events javascript-events twitter-bootstrap

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



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:

  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 .

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