jquery - suggestion - typeahead states

bootstrap-typeahead.js agrega un oyente en el evento seleccionado

Question

Soy nuevo en el marco de Bootstrap Twitter, y necesito usar bootstrap-typeahead.js para autocompletar, pero también necesito obtener el valor seleccionado por el usuario para el encabezado de escritura.

Este es mi código:

<input type="text" class="span3" style="margin: 0 auto;" 
                   data-provide="typeahead" data- items="4" 
                   data-source=''["Alabama","Alaska"]''>

¿Cómo puedo agregar un oyente para obtener el valor seleccionado del tipo typeahead y pasarlo en una función? Por ejemplo, cuando uso ExtJs, aplico esta estructura:

listeners: {
   select: function(value){
     ........
   }
}

¿Cómo puedo hacer algo similar con un typeahead?

Answer 1

Aquí está la solución con múltiples eventos activados para tabulados y seleccionados:

$(''#remote .typeahead'').on(
    {
        ''typeahead:selected'': function(e, datum) {
            console.log(datum);
            console.log(''selected'');
        },
        ''typeahead:autocompleted'': function(e, datum) {
            console.log(datum);
            console.log(''tabbed'');
        }
});

Answer 2

En v3 twitter bootstrap typeahead se descartará y se reemplazará por twitter typeahead (que tiene la función que desea y mucho más)

https://github.com/twitter/typeahead.js

uso como este:

jQuery(''#autocomplete-input'').on(''typeahead:selected'', function (e, datum) {
    console.log(datum);
});

Answer 3

Gracias P.scheit por tu respuesta. Permítanme agregar esto a su solución que maneja la autocompletación cuando el usuario presiona la tecla de tabulación.

jQuery(''#autocomplete-input'').on(''typeahead:selected'', function (e, datum) {
    console.log(datum);
}).on(''typeahead:autocompleted'', function (e, datum) {
    console.log(datum);
});

Answer 4

He podido hacer que esto funcione simplemente observando el evento de "cambio" en el elemento, que Twitter Bootstrap Typeahead activa en select.

var onChange = function(event) {
  console.log "Changed: " + event.target.value
};

$(''input.typeahead'').typeahead({ source: [''test1'', ''test2''] });
$(''input.typeahead'').on(''change'', onChange);

Salidas ''Modificado: test1'' cuando el usuario selecciona test1.

NOTA: También activa el evento cuando el usuario presiona "Enter" incluso si no se encuentra una coincidencia, por lo que debe decidir si eso es lo que desea. Especialmente, si el usuario ingresa "te" y luego hace clic en "test1", obtendrá un evento para "te" y un evento para "test1", que es posible que desee evitar.

(Versión 2.0.2 Twitter Bootstrap Typeahead)

Answer 5

Prueba este fork de typeahead . ¡Te da un evento onselect, población asincrónica y más!

Answer 6

Yo tuve el mismo problema. Puede usar esta función para crear sus eventos personalizados: https://github.com/finom/Functions/tree/master/FunctionCallEvent#why-is-it-needed (para agregar más eventos, debe conocer la estructura del prototipo typeahead)

Answer 7

deberías usar " actualizador ":

$(''#search-box'').typeahead({

    source: ["foo", "bar"],

    updater:function (item) {

        //item = selected item
        //do your stuff.

        //dont forget to return the item to reflect them into input
        return item;
    }
});

Answer 8

puedes usar afterSelect

$(''#someinput'').typeahead({ 
    source: [''test1'', ''test2''], 
    afterSelect: function (item) {
        // do what is needed with item
        //and then, for example ,focus on some other control
        $("#someelementID").focus();
    }
});

Answer 9

$(''input.typeahead'').typeahead({ 
    source: [''test1'', ''test2''], 
    itemSelected: function(e){ 
        ---your code here---
    } 
});