jQuery UI autocompletar widget de búsqueda de configuración

Question

Estoy buscando en el uso de la jQuery UI autocompletar widget para poner en práctica la búsqueda de usuario por primera o la última nombre. Parece que por defecto se ve autocompletar palabras por secuencia de caracteres sin importar su ocurrencia en una palabra. Así que si tiene datos tales como: javascript, asp, haskell y escribir en 'as' obtendrá los tres. Me gustaría sólo para que coincida principio de la palabra. Así en el ejemplo anterior se obtiene solamente 'asp'. ¿Hay una manera de configurar el widget de autocompletar para hacer esto?

En última instancia, sería aún mejor para comenzando de nombre o apellido como es en Gmail.

Nota: Estoy tratando de encontrar una manera de hacer esto utilizando la interfaz de usuario jQuery widget de forma específica. Puesto que ya estoy usando jQuery UI en mi proyecto, tengo la intención de seguir con ella y tratar de no añadir bibliotecas adicionales para mi aplicación web.

Answer 1

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

A partir de la documentación de autocompletar:

  

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

     

• Un objeto request, con una sola propiedad llamada "expresión", que se refiere al valor actualmente en la entrada de texto. Por ejemplo, cuando el usuario introduce "nuevo yo" en un campo de la ciudad que se establece para hacer autocompletar, el request.term llevará a cabo "nuevo yo".
  • Una función response, una devolución de llamada, que espera un solo argumento para contener los datos para sugerir al usuario. Estos datos deben ser filtrado basado en el plazo previsto, y debe ser una matriz en el formato permitido para datos locales simples: String-Array o Object-Array con etiqueta / valor / ambas propiedades.

Ejemplo código:

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 el término de búsqueda de manera que cualquiera de los términos de expresiones regulares-significativa en el texto escrito por el usuario se tratan 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(). En él se especifica una expresión regular que comienza con ^ (circunflejo), lo que implica, que coincidirá sólo cuando los caracteres escritos aparecen al principio del término de la matriz, que es lo que quería. También utiliza la opción "i", que implica un partido entre mayúsculas y minúsculas.
• la utilidad $.grep() sólo llama a la función proporcionada en cada término en la matriz proporcionado. La función en este caso, simplemente usa la expresión regular para ver si el término de la matriz es a la altura de lo que se ha escrito.
• Por último, el responseFn () se invoca con el resultado de la búsqueda.

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

lo que parece:

Sólo una nota: Encuentro la documentación de autocompletar a ser bastante inmadura en este punto. No he encontrado ejemplos que hicieron esto, y no pude encontrar el documento de trabajo sobre la que .css eran necesarias o qué clases css sería utilizado. Todo esto lo supe de inspeccionar el código.

Véase también, cómo puedo personalizada -format el plug-in resultados Autocomplete?

Answer 2

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

Se coincide en los caracteres iniciales, solamente.

En cuanto a juego basado en el nombre o el apellido, que acababa de tener que suministrar 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 lookup que se pasa a inicializar el control de autocompletar puede ser una lista o un objeto. Lo anterior mostró una lista simple. Si quieres unos datos adjuntos a las sugerencias que consiguen devueltos, a continuación, hacer que la opción lookup un objeto, como esto:

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

Answer 3

THX Cheeso para intrducing jsbin.com,

he ampliado su código para apoyar partidos Nombres y Apellidos, también.

  $("#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/

tipo 'un' o 're'

Answer 4

Si desea buscar en el comienzo de cada palabra de la cadena, una solución más elegante para hombre de confianza de es tomar Cheeso de, pero sólo tiene que utilizar la palabra expresión regular carácter especial límite:

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

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

Answer 5

Hay otra autocompletar jQuery plug-in que opcionalmente búsquedas justo al comienzo de cada artículo (la opción es matchContains=false , creo que es el valor por defecto también).

Ante la ausencia de tal opción en el plugin jQuery UI, supongo que ya sea que usted tiene que usar un plugin diferente, o reescribir el que usted está usando ahora.

Answer 6

¿Dónde está usted recibiendo los datos para rellenar el autocompletar? Es a partir de una base de datos? Si es así, se puede hacer lo que quiera en su consulta y sólo devolverá resultados que coinciden con el comienzo de cada palabra (nombre / apellido)