Configuración de búsqueda de widget de Autocompletar jQuery UI

En jQuery UI v1.8rc3, el widget autocompletar acepta una opción source que puede ser una cadena, una matriz o una función de devolución de llamada. Si es una cadena, autocompletar hace un GET en esa URL para obtener opciones / sugerencias. Si una matriz, autocompletar hace una búsqueda, como usted señaló, para la presencia de los caracteres escritos en cualquier posición en los términos de la matriz. La variante final es lo que quieres - la función de devolución de llamada.

De la documentación de autocompletar:

La tercera variación, la devolución de llamada, proporciona la mayor flexibilidad, y se puede utilizar para conectar cualquier fuente de datos a Autocompletar. La devolución de llamada recibe dos argumentos:

• Un objeto request, con una sola propiedad llamada "term", que se refiere al valor actualmente en la entrada de texto. Por ejemplo, cuando el usuario ingresa "nuevo yo" en un campo de ciudad que está configurado para hacer autocompletar, el request.term mantendrá "nuevo yo".
* Una función response, una devolución de llamada que espera una argumento para contener los datos a sugerir al usuario. Estos datos deben filtrarse en función del término proporcionado, y deben ser una matriz en el formato permitido para datos locales simples: Matriz de cadena o Matriz de objeto con etiqueta/valor/ambas propiedades.

Código de ejemplo:

var wordlist= [ "about", "above", "across", "after", "against",
                "along", "among", "around", "at", "before", 
                "behind", "below", "beneath", "beside", "between", 
                "beyond", "but", "by", "despite", "down", "during", 
                "except", "for", "from", "in", "inside", "into", 
                "like", "near", "of", "off", "on", "onto", "out", 
                "outside", "over", "past", "since", "through", 
                "throughout", "till", "to", "toward", "under", 
                "underneath", "until", "up", "upon", "with", 
                "within", "without"] ; 

$("#input1").autocomplete({
    // The source option can be an array of terms.  In this case, if
    // the typed characters appear in any position in a term, then the
    // term is included in the autocomplete list.
    // The source option can also be a function that performs the search,
    // and calls a response function with the matched entries.
    source: function(req, responseFn) {
        var re = $.ui.autocomplete.escapeRegex(req.term);
        var matcher = new RegExp( "^" + re, "i" );
        var a = $.grep( wordlist, function(item,index){
            return matcher.test(item);
        });
        responseFn( a );
    }
});

Algunos puntos clave:

• la llamada a $.ui.autocomplete.escapeRegex(req.term); Que escapa el término de búsqueda de modo que cualquier término con significado regular en el texto escrito por el usuario se trate como texto sin formato. Por ejemplo, el punto (.) es significativo para regex. Aprendí de esta función escapeRegex leyendo el código fuente de autocompletar.
• la línea con new Regexp(). Especifica una regexp que comienza con ^ (Circumflex), lo que implica que solo coincidirá cuando los caracteres escritos aparezcan al principio del término en la matriz, que es lo que quería. También utiliza la opción " i " que implica una coincidencia insensible a mayúsculas y minúsculas.
• la utilidad $.grep() solo llama a la función proporcionada en cada término en el arreglo proporcionado. La función en este caso simplemente usa la expresión regular para ver si el término en la matriz coincide con lo que se escribió.
• finalmente, el responseFn() es invocado con el resultado de la búsqueda.

Demostración de trabajo: http://jsbin.com/ezifi

Cómo se ve:

Solo una nota: Encuentro que la documentación sobre autocompletar es bastante inmadura en este punto. No encontré ejemplos que hicieran esto, y no pude encontrar trabajo doc en cuál .los archivos css eran necesarios o que .se usarían clases CSS. Aprendí todo esto al inspeccionar el código.

Véase también, ¿cómo puedo personalizar el formato de los resultados del complemento de Autocompletar?