Autocompletar de Jquery: cómo agregar un evento de clic a la lista

Hola, estoy usando el siguiente código para completar mi lista de autocompletar.

    $('#input').autocomplete({ ajax_get : get_roles});

    function get_roles(v,cont,roleName){
            var roleName = roleName.value;
            roleName = roleName.toLowerCase();
            $.get('/da/roleautocomplete?roleName='+escape(roleName),{q:v},
                function(obj){
                  var res = [];
                  for(var i=0;i<obj.length;i++){
                    res.push({ id:i , value:obj[i]});
                  }
                  cont(res);
                },
                'json')
        }

Quiero activar un evento al hacer clic o seleccionar un elemento de la lista de autocompletar. He probado esto -

$('#input').autocomplete({
     select:function(event, ui){
          // do your things here
      }, etc.

pero fue en vano. ¿Puede alguien por favor ayudarme con esto?

preguntado el 03 de mayo de 12 a las 13:05

No sé cómo "aceptar", en qué enlace hacer clic, cómo votar por una buena respuesta. ¿Puede alguien por favor decir? -

Si observa las respuestas a sus preguntas, hay números con flechas hacia arriba y hacia abajo en la parte superior izquierda de la respuesta. Justo debajo hay un icono que parece un cheque. El texto del atributo de título para esos elementos de control explica cómo usarlos. -

2 Respuestas

Tuve un problema similar cuando intenté usar por primera vez select:function(event,ui){ ... }, pero definitivamente es el camino a seguir.

La clave es usar ui.item para obtener la opción en la que se hizo clic o se seleccionó de otro modo. Originalmente había estado usando event luego this, pero esos son diferentes para los clics frente a la selección de teclas (eche un vistazo con console.log para tener algo de perspectiva), entonces ui.item es lo que quieres El autocompletar estará configurando label: ..., value: ..., por lo que lo más probable es que use ui.item.label y ui.item.value.

contestado el 03 de mayo de 12 a las 13:05

Demostración: http://jsfiddle.net/DMDHC/

Lectura útil: http://jqueryui.com/demos/autocomplete/ (puede leer sobre opciones y eventos disponibles, etc.)

Código:

$( "#search" ).autocomplete({
    source: function( req, resp ) {
        $.post( "/echo/json/", {
            json: '["Rambo", "Foobar", "This", "That", "Batman", "Hulk"]',
            delay: 1
        }, function(data) {
            resp( data );
        }, "JSON" );
    },
    select: function(event, ui) {
        var TABKEY = 9;
        this.value = ui.item.value;

        if (event.keyCode == TABKEY) { 
            event.preventDefault();
            this.value = this.value + " ";
            $('#search').focus();
        }

        return false;
    }
});

respondido 12 nov., 18:02

En mi código, si pongo la función de selección anterior, simplemente no llama a la función escrita en la etiqueta de selección. Por favor ayuda ! - linusunis alimentado

@linusunisfed, ¿puedes hacer cambios en el jsfiddle y pasarmelo? or parece que obtuviste la respuesta de la publicación anterior de todos modos diviértete! :) - Tats_innit

En realidad estoy usando un complemento diferente. Eso es jquery.js y Autocomplete.js, que es un complemento jqac. El complemento que está utilizando probablemente sea diferente. Por favor hagamelo saber ! - linusunis alimentado

Hola @linusunisfed hmm no te preocupes hermano :) no lo parece, pero ¿puedes pasarme la URL de la página desde donde estás usando tu complemento por favor y es muy tarde en mi lado del mundo, así que dormiré en 10 / 20 minutos :) déjame saber qué complemento estás usando, que tengas un buen día, ¡salud! - Tats_innit

Estoy usando el siguiente complemento: código.google.com/p/jqac/issues/… - linusunis alimentado

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.