ejemplo - jQuery UI Autocompletar configuración de búsqueda de widgets

jquery ui autocomplete

Question

Estoy buscando utilizar el widget de autocompletar de jQuery UI para implementar la búsqueda de usuario por nombre o apellido. Parece que, por defecto, la función autocompletar busca palabras por secuencia de caracteres sin importar su aparición en una palabra. Entonces, si tiene datos como: javascript, asp, haskell y escribe ''as'' obtendrá los tres. Me gustaría que solo coincida con el comienzo de la palabra. Entonces en el ejemplo anterior solo obtienes ''asp'' . ¿Hay alguna manera de configurar el widget de autocompletar para hacer esto?

En última instancia, sería aún mejor igualar por principio de nombre o apellido como en Gmail.

Nota: Estoy tratando de encontrar una manera de hacerlo utilizando específicamente el widget jQuery UI. Como ya estoy usando jQuery UI en mi proyecto, planeo seguir con eso y tratar de no agregar bibliotecas adicionales a mi aplicación web.

Answer 1

¿De dónde sacas los datos para llenar el autocompletar? ¿Es de una base de datos? Si es así, puede hacer lo que quiera en su consulta y solo devolver resultados que coincidan con el comienzo de cada palabra (nombre / apellido)

Answer 2

En jQuery UI v1.8rc3, el widget de autocompletar acepta una opción de source que puede ser una cadena, una matriz o una función de devolución de llamada. Si se trata de una cadena, la función 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 tecleados en cualquier posición en los términos de la matriz. La variante final es lo que quiere: 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 obtiene dos argumentos:

• Un objeto de request , con una sola propiedad llamada "término", que se refiere al valor actualmente en la entrada de texto. Por ejemplo, cuando el usuario ingresó "nuevo yo" en un campo de ciudad que está configurado para completar automáticamente, el request.term contendrá "nuevo yo".
• Una función de response , una devolución de llamada que espera que un único argumento contenga los datos para sugerir al usuario. Esta información debe filtrarse en función del término proporcionado, y debe ser una matriz en el formato permitido para datos locales simples: String-Array o Object-Array con propiedades de label / value / both.

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); Eso escapa al término de búsqueda para que cualquier término con significado expresivo 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 la new Regexp() . Especifica una expresión regular que comienza con ^ (Circumflex), lo que implica que coincidirá solo cuando los caracteres escritos aparezcan al principio del término en la matriz, que es lo que usted quería. También usa la opción "i" que implica una coincidencia que no distingue entre mayúsculas y minúsculas.
• la $.grep() solo llama a la función proporcionada en cada término en la matriz proporcionada. 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, se invoca a responseFn () con el resultado de la búsqueda.

demostración funcional: http://jsbin.com/ezifi

como se ve:

Solo una nota: encuentro que la documentación sobre autocompletar es bastante inmadura en este momento. No encontré ejemplos que hicieran esto, y no pude encontrar el documento de trabajo en el que los archivos .css eran necesarios o las clases .css que se utilizarían. Aprendí todo esto de inspeccionar el código.

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

Answer 3

Hay otro complemento de autocompletar jQuery que opcionalmente busca al principio de cada elemento (la opción es matchContains=false , creo que también es la predeterminada).

Dada la ausencia de dicha opción en el plugin jQuery UI, supongo que tendrá que usar un complemento diferente o reescribir el que está usando ahora.

Answer 4

Si desea buscar el comienzo de cada palabra en la cadena, una solución más elegante para el secuaz es tomar la de Cheeso, pero solo use el carácter especial de límite de palabras de la expresión regular:

var matcher = new RegExp( "//b" + re, "i" );

Ejemplo: http://jsbin.com/utojoh/2 (intenta buscar ''bl'')

Answer 5

Yo uso el autocompletado de devbridge. http://www.devbridge.com/projects/autocomplete/jquery/

Solo coincide con los personajes iniciales.

texto alternativo http://i46.tinypic.com/2ihq7pd.jpg

En cuanto a la coincidencia basada en el nombre o apellido, solo tendrías que proporcionar una lista de búsqueda con el nombre y apellido.

Ejemplo de uso:

  var wordlist = [
      ''January'', ''February'', ''March'', ''April'', ''May'', ''June'',
      ''July'', ''August'', ''September'', ''October'', ''November'',
      ''December'' ]; 

      var acOptions = {
          minChars:2,
          delimiter: /(,|;)/s*/, // regex or character
          maxHeight:400,
          width:300,
          zIndex: 9999,
          deferRequestBy: 10, // miliseconds

          // callback function:
          onSelect: function(value, data){
              //$(''#input1'').autocomplete(acOptions);
              if (typeof data == "undefined") {
                  alert(''You selected: '' + value );
              }else {
                  alert(''You selected: '' + value + '', '' + data);
              }
          },

          // local autosuggest options:
          lookup: wordlist
      };

La opción de lookup que pasa para inicializar el control de autocompletar puede ser una lista o un objeto. Lo anterior mostró una lista simple. Si desea que se adjunten algunos datos a las sugerencias que se devuelven, haga que la opción de lookup un objeto como este:

var lookuplist = {
    suggestions:   [ "Jan", "Feb", "Mar", "Apr", "May" ],
    data :         [ 31, 28, 31, 30, 31, ]
};

Answer 6

thx cheeso por intrigar jsbin.com,

También extendí tu código para admitir las coincidencias de los primeros y los apellidos.

  $("#input1").autocomplete({
      source: function(req, responseFn) {
          addMessage("search on: ''" + req.term + "''<br/>");

          var matches = new Array();
          var needle = req.term.toLowerCase();

          var len = wordlist.length;
          for(i = 0; i < len; ++i)
          {
              var haystack = wordlist[i].toLowerCase();
              if(haystack.indexOf(needle) == 0 ||
                 haystack.indexOf(" " + needle) != -1)
              {
                  matches.push(wordlist[i]);
              }
          }

          addMessage("Result: " + matches.length + " items<br/>");
          responseFn( matches );
      }
  });

demo: http://jsbin.com/ufimu3/

escriba ''an'' o ''re''