Configuración de búsqueda de widget de autocompletar interfaz de usuario de jQuery

Luego de investigar en varios repositorios y páginas webs al terminar nos hemos encontrado la solución que te compartiremos aquí.

Solución:

En jQuery UI v1.8rc3, el widget de autocompletar acepta una opción de origen que puede ser una string, un arrayo una función de devolución de llamada. Si es un string, autocompletar hace un GET en esa URL para obtener opciones / sugerencias. Si una array, autocompletar realiza una búsqueda, como señaló, de la presencia de los caracteres escritos en cualquier posición en los términos de la array. La variante final es lo que desea: 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:

• A request objeto, 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 autocompletar, el request.term sostendrá “nuevo yo”.
• A response función, una devolución de llamada que espera que un solo argumento contenga los datos que se sugieren al usuario. Estos datos deben filtrarse según el término proporcionado y deben ser un array en el formato permitido para datos locales simples: String-Array o Object-Array 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 );
    
);

Unos pocos key puntos:

• la llamada a $.ui.autocomplete.escapeRegex(req.term); Ese escapa el término de búsqueda para que cualquier término con significado de expresiones regulares en el texto escrito por el usuario se trate como texto sin formato. Por ejemplo, el punto (.) Es significativo para regex. Me enteré de esta función escapeRegex leyendo el código fuente de autocompletar.
• la linea con 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 el array, que es lo que querías. También utiliza la opción “i” que implica una coincidencia que no distingue entre mayúsculas y minúsculas.
• los $.grep() La utilidad simplemente llama a la función proporcionada en cada término en el array. La función en este caso simplemente usa la expresión regular para ver si el término en el array coincide con lo que se escribió.
• finalmente, se invoca responseFn () 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 un documento de trabajo sobre qué archivos .css eran necesarios o qué clases .css se usarían. Aprendí todo esto inspeccionando el código.

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

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

Solo coincide con los personajes iniciales.

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

Uso de ejemplo:

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

      var acOptions = ;)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
      ;

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

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

gracias cheeso por introducir jsbin.com,

También extendí su código para admitir coincidencias de nombre y apellido.

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

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

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

          addMessage("Result: " + matches.length + " items
");
          responseFn( matches );
      
  );

demostración: http://jsbin.com/ufimu3/

escriba ‘an’ o ‘re’

Te mostramos comentarios y valoraciones

---

---

Utiliza Nuestro Buscador