Haciendo el widget Autocompletar de jQuery UI * en realidad * autocompletar

Question

Necesito una autocompletar en la aplicación en la que estoy trabajando y, dado que ya estoy usando jQuery UI, estoy tratando de hacer que su widget Autocompletar cumpla con mis necesidades.

El primer paso es hacer que el término de búsqueda coincida solo al comienzo de los términos sugeridos. Ya lo tengo funcionando, como puedes ver en el código a continuación. El segundo paso es tener la primera sugerencia realmente autocompletar.

Lo que probablemente requiera un poco de explicación. Cuando escucho "autocompletar", visualizo tipear "f" y hacer que los contenidos del campo de texto cambien a "foo", con el "oo" seleccionado, para que sea reemplazado si escribo otro carácter y me quedo en el campo si Salgo de ella. Normalmente llamaría a lo que sugiere el widget Autocompletar, en lugar de autocompletar.

Al ver cómo funciona Autocompletar internamente, creo que el evento autocompleteopen es el lugar correcto para hacerlo (se llama cada vez que se actualiza la lista de sugerencias), pero no sé cómo acceder a la sugerencia lista desde allí.

¿Alguna idea?

$("#field").autocomplete({ 
    delay: 0, 

    source: function filter_realms(request, response) { 
     var term = request.term.toLowerCase(); 
     var length = term.length; 

     response($.grep(candidates, function(candidate) { 
      return candidate.substring(0, length).toLowerCase() === term; 
     })); 
    }, 

    open: function(event, ui) { 
     // magic happens here? 
    } 
}); 

Answer 1

Got it. Olvidé que se puede acceder a los widgets a través del .data().

$("#field").autocomplete({ 
    delay: 0, 

    source: function filter_realms(request, response) { 
     var term = request.term.toLowerCase(); 
     var length = term.length; 

     response($.grep(candidates, function(candidate) { 
      return candidate.substring(0, length).toLowerCase() === term; 
     })); 
    }, 

    open: function(event, ui) { 
     var current = this.value; 
     var suggested = $(this).data("autocomplete").menu.element.find("li:first-child a").text(); 

     this.value = suggested; 
     this.setSelectionRange(current.length, suggested.length); 
    } 
}); 

Answer 2

Tomó la porción de control de longitud y modificó la función de filtro dentro de la búsqueda. De esta forma, puede aprovechar el manejo JSON de la interfaz de usuario.

filter: function(array, term) { 
    var matcher = new RegExp($.ui.autocomplete.escapeRegex(term), "i"); 

    var smatcher = term.toLowerCase(); 
    var length = smatcher.length; 


    return $.grep(array, function(value) { 
       if(value.label.substring(0, length).toLowerCase() == smatcher){ 
        return matcher.test(value.label || value.value || value); 
       } 
    });