javascript - Activación mediante programación de la visualización del resultado de typeahead.js

Question

Estoy utilizando Twitter''s typeahead.js ( https://github.com/twitter/typeahead.js/ ) en un campo de entrada que se completa previamente a partir de una cadena de consulta. Después de cargar la página, me gustaría disparar programáticamente la visualización de los resultados de escritura anticipada sin que el usuario tenga que escribir nada en el campo del formulario.

Fuera de la caja, typeahead.js solo se activa si el usuario escribe algo manualmente en el campo de entrada y no puedo encontrar ningún método en typeahead.js al que pueda llamar para activar la visualización de resultados.

Cualquier puntero sería muy apreciado.

¡Gracias!

Answer 1

¡Ten cuidado con esto!

Para aquellos que están pensando en activar el comportamiento de escritura anticipada manualmente (haciendo clic en un botón, por ejemplo), le recomiendo encarecidamente que no haga esto.

Vine por esta solución y perdí casi todo un día haciendo las pausas para que funcione correctamente (en mi caso fue un clic de botón).

Para aquellos que realmente quieren ir por este camino oscuro, comparto contigo mi feo código que lo hace funcionar:

//Removes default features of typeahead
//This means that typeahead will not work like an "autocomplete", it only will be trigged when the user Click in #btnSearch button!
var txt = $("#typeahead");
//Save input events in variables (we''ll need them)
eventInput = $._data(txt[0], "events").input[0];
eventBlur = $._data(txt[0], "events").blur[1];
//Remove input events
txt.unbind("blur");
txt.unbind("input");

//Set click event that triggers typeahead features manually
$("#btnSearch").click(function () {
    //Clears the cache of engine for it call ajax again, without it when the term was already searched the ajax is not called!
    engine.clearRemoteCache();

    txt.focus(); //When we click in a button, the focus from input is lost, so we set it again to not lose the behaviors of keyboard keys (up, down, tab, etc)
    txt.bind("input", eventInput); //Bind the event that we had saved
    txt.trigger("input"); //Trigger input (like the answer from @epascarello)
    txt.unbind("input"); //Removes it again 
});

//Set event on parent of the suggestion''s div, this makes the sugestion div close when user click outside it
$("body").click(function () {            
    if (eventBlur != undefined) {
        if ($(".tt-dropdown-menu:visible").length > 0) {
            eventBlur.handler(); //This event closes the suggestion menu
        }
    }
});

Otra cosa que hice fue cambiar un código del evento "_checkInputValue" en typeahead.js. Yo cambio esto:

areEquivalent = areQueriesEquivalent(inputValue, this.query);

a esto:

areEquivalent = false;//areQueriesEquivalent(inputValue, this.query);

Lo configuro en falso porque typeahead no envía dos solicitudes idénticas al servidor . Esto ocurre cuando el usuario hace clic dos veces en el botón de búsqueda (es decir, cuando busca más de una vez el mismo texto que ya ha buscado). De todos modos, si está utilizando datos locales, no tendrá que hacer esto.

Answer 2

A partir de Typeahead v0.10.1, cambiar el valor de typeahead activará otra consulta y abrirá el menú desplegable:

var val = $(".typeahead").typeahead(''val'');
$(".typeahead").typeahead(''val'', '''');
$(".typeahead").typeahead(''val'', val);

Answer 3

Al mirar a través del código fuente, parece almacenar un objeto TypeaheadView en los datos del elemento bajo la clave typeahead . Este objeto TypeaheadView tiene un método interno, _showDropdown , que está vinculado internamente al evento de enfoque (y algunos otros).

No recomendaría hacer esto, pero debería poder llamar a ese método interno manualmente:

$(''#yourTypeaheadElement'').data(''typeahead'')._showDropdown();

Alternativamente, ¿acabas de intentar simplemente enfocando tu elemento typeahead cuando se carga la página (después de inicializarlo como un elemento typeahead, por supuesto):

// after page loads and yourTypeaheadElement is initialized as a typeahead
$(''#yourTypeaheadElement'').focus();

Answer 4

Aquí hay una versión simplificada del trabajo de @ Sam_Butler: http://jsfiddle.net/rimian/hrnf9

<button type="button" id="button">Crick</button>
<input type="text" id="text" class="typeahead">

Javascript:

$(''#button'').click(function() {
  $("#text").focus().typeahead(''val'', ''London'');
});

// instantiate the bloodhound suggestion engine
var locations = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace(''value''),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: ''https://maps.googleapis.com/maps/api/geocode/json?address=%QUERY&components=country:GB&sensor=false&region=uk'', //add key
        filter: function (locations) {
            return $.map(locations.results, function (location) {
                return {
                    value: location.formatted_address
                };
            });
        }
    }
});

locations.initialize();

$(''#text'').typeahead(null, {
    name: ''value'',
    displayKey: ''value'',
    source: locations.ttAdapter()
});

Answer 5

De acuerdo con mis pruebas (ver fiddle ), el método focus () es necesario para mostrar el menú desplegable. Asi que:

theVal = $(''.typeahead'').val();
$(".typeahead").typeahead(''val'', '''')
$(".typeahead").focus().typeahead(''val'',theVal).focus();

• En la línea 1, estamos asignando el valor actual de la entrada Typeahead a la variable theVal ;
• En la línea 2 simplemente restablecemos el valor calculado de typeahead; y
• En la línea 3, recuperamos el valor original y el foco, lo que da como resultado que el menú desplegable de sugerencias se muestre como si el usuario hubiera tecleado algo.

De hecho, necesitaba esto para alentar encarecidamente a los usuarios a seleccionar entre las sugerencias de Bloodhound provenientes de una llamada de API de geocodificación para poder garantizar que el cliente obtuviera las coordenadas antes de enviar un formulario.

Answer 6

Eché un vistazo al código fuente y encontré esta forma no documentada:

var $myinput = $(''#myinput'');
$myinput.data(''typeahead'')._showDropdown()

Answer 7

El disparador de entrada parece hacerlo.

$(".typeahead").eq(0).val("Uni").trigger("input");

Probado esto en la página de ejemplo .

Answer 8

Esto debería funcionar con el "viejo" complemento de escritura anticipada:

$(".typeahead").eq(0).trigger("keyup");

No lo he probado con IE desafortunadamente ... No sé sobre el nuevo plugin de escritura anticipada ...

Answer 9

Esto funcionó para mí.

$( document ).ready(function() {
    $(''#the-basics .typeahead'').typeahead({
      hint: false,
      highlight: true,
      minLength: 0
    },
    {
      name: ''states'',
      displayKey: ''value'',
      source: substringMatcher(states)
    });

    //set a value to input to trigger opening
    $(".typeahead").eq(0).val("a").trigger("input");
    //remove value for end user
    $(".typeahead").eq(0).val("");

});

Vea aquí por ejemplo: http://joshuamaynard.com/sandbox/autocomplete

Answer 10

Las otras respuestas fueron útiles pero no resolvieron mi problema. Esta solución no implica la personalización del código de ui angular en sí mismo y sirve para activar el encabezado de escritura de resultados en un clic explícito.

Para hacer esto tuve que superponer un campo de texto encima de otro campo de texto (deshabilitado) que es el real con el tipo de entrada. Nadie sabrá que el otro está allí, pero tiene que estar ahí para que angular-ui abra el menú en la ubicación correcta. No puede convertirlo en un campo oculto porque no podrá mostrar el menú en la ubicación correcta.

La directiva a continuación observará las variables typeaheadText y typeaheadTrigger para rellenar el campo disblendido cuando el botón lo activa (al establecer el activador en verdadero). La directiva tiene un alcance aislado por lo que no depende de nada más que pasar.

directive(''typeaheadTrigger'', function() {
  return {
    require: ["ngModel"],
    scope: {
      typeaheadText: ''='',
      triggerFlag: ''=''
    },
    link: function(scope, element, attr, ctrls) {
      scope.$watch(''triggerFlag'', function(value) {
        if (scope.triggerFlag) {
          ctrls[0].$setViewValue(scope.typeaheadText);
          scope.typeaheadText = '''';
          scope.triggerFlag = false;
        }
      });
    }
  };
})

El controlador establece algunas cosas para esto: las variables de alcance del disparador y del texto dentro de un objeto. Esto demuestra cómo hacerlo: lo ideal es que envuelva todo esto en otra directiva para que pueda ser utilizado en su aplicación mientras oculta los detalles.

Aquí está el plan: http://plnkr.co/edit/UYjz6F5ydkMQznkZAlfx?p=preview

Answer 11

Lo usé para activar manualmente una selección, cuando 1 ítem estaba en el tt-dataset. Simplemente tenía sentido agregar esto.

$("#mytypeahead").keyup(function (e) {
                var charCode = (typeof e.which === "number") ? e.which : e.keyCode;
                if (charCode == 13) {
                    if ($(this).parent().find(".tt-dataset").children().length == 1) {
                        //This is how we are submitting a single selection on enter key
                        $(this).parent().find(".tt-dataset").children(0).addClass("tt-cursor");
                        var kde = jQuery.Event("keydown");
                        kde.which = 13;
                        $(this).trigger(kde);                           
                    }    
                }                    
            });

Answer 12

Ninguno de estos funcionará a menos que deliberadamente ponga ''typeahead'' en las clases de su etiqueta de entrada. Si no siente la necesidad de hacer esto (no es necesario que funcione), es mejor que use la clase escrita en la etiqueta de entrada por typeahead.js. Es ".tt-input". Este es el ejemplo que escribí de Sam_Butler, recodificado para la nueva clase de CSS. Esto funciona para mí en el más reciente typeahead 0.10.5:

var theVal = jQuery(''.tt-input'').val();
jQuery(".tt-input").typeahead(''val'', ''re'')
jQuery(".tt-input").focus().typeahead(''val'',theVal).focus();

Answer 13

Para cualquiera que encuentre este problema con el tipo de twitter después de la versión 0.11.1, así es como lo resolví con una línea:

$(".typeahead-input").typeahead(''val'', "cookie")
                     .trigger("input")
                     .typeahead(''open'');

Answer 14

Usando: Typeahead v0.10.5

No usar: $(''.typeahead'').typeahead(''open'');

Esto actualmente no funciona. Fuente: https://github.com/twitter/typeahead.js/issues/798 . Como una solución temporal, use un evento de selección de jQuery personalizado (después de haber instanciado el typeahead):

var ttInstance = $(''.typeahead'').typeahead( config ); // Create Typeahead
ttInstance.typeahead(''val'', ''pancakes''); // Set an initial value

var evt = jQuery.Event(''keydown'');
evt.keyCode = evt.which = 40;
ttInstance.trigger(evt); // Opens the dropdown

Answer 15

Utilicé twitter bootstrap typeahead, y dije que en foco, la lista de sugerencias se abrirá. Las respuestas aquí no funcionaron para mí, así que escribí esta directiva simple (requiere jquery):

.directive(''typeaheadFocusTrigger'', function() {
        return {
            limit: ''A'',
            link: function(scope, element, attrs) {
                $(element).on(''focus'', function(e) {
                    var $target = $(e.target);
                    var origVal = $target.eq(0).val();
                    $target.eq(0).val('''').trigger(''input'')
                    .eq(0).val(origVal).trigger(''input'');
                });
            }
        }
    });

Ahora solo agrega este atributo y se disparará en el foco

<input typeahead-focus-trigger typeahead="">

Answer 16

$(".typeahead").typeahead(''lookup'').focus();

dispara con el valor de entrada existente. puedes cambiar el valor por adelantado del curso