jQuery UI Autocomplete widget di ricerca di configurazione

Question

sto cercando in utilizzando il jQuery UI autocomplete widget per implementare ricerca utente dal primo o l'ultimo nome. Sembra che dal completamento automatico di default ricerca le parole da sequenza di caratteri non importa la sua presenza in una parola. Quindi, se si dispone di dati, quali: javascript, asp, haskell e digitare 'as' otterrete tutti e tre. Vorrei che per abbinare solo a partire della parola. Così, nell'esempio di cui sopra si ottiene solo 'asp'. C'è un modo per configurare il widget di completamento automatico per fare questo?

In definitiva sarebbe ancora meglio cominciando del nome o del cognome come è in Gmail.

Nota: Sto cercando di trovare un modo per fare questo utilizzando il widget di jQuery UI specifico. Dal momento che sto già utilizzando jQuery UI nel mio progetto, ho intenzione di attaccare con esso e cercare di non aggiungere librerie aggiuntive per la mia applicazione web.

Answer 1

In jQuery UI v1.8rc3, il completamento automatico widget di accetta un opzione fonte che può essere sia una stringa, un array o una funzione di callback. Se si tratta di una stringa, completamento automatico fa un GET su quel URL per ottenere opzioni / suggerimenti. Se un array, completamento automatico fa una ricerca, come lei ha sottolineato, per la presenza dei caratteri digitati in qualsiasi posizione nei termini della matrice. La variante finale è ciò che si vuole - la funzione di callback.

Dalla documentazione di completamento automatico:

  

La terza variazione, la richiamata, offre la massima flessibilità, e può essere utilizzato per collegare qualsiasi fonte di dati a completamento automatico. Il callback riceve due argomenti:

     

• Un oggetto request, con una singola proprietà denominata "termine", che si riferisce al valore attualmente il metodo di scrittura. Ad esempio, quando l'utente ha immesso "nuova yo" in un campo città posta a fare completamento automatico, il request.term terrà "nuova yo".
  Funzione response • A, un callback, che si aspetta un singolo argomento per contenere i dati per suggerire all'utente. Questi dati deve essere filtrato in base al termine previsto, e deve essere un array in formato consentito per i dati locali semplici: String-Array o Object-Array con etichetta / valore / entrambe le proprietà.

Esempio di codice:

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 );
    }
});

Alcuni punti chiave:

• la chiamata a $.ui.autocomplete.escapeRegex(req.term); che fughe il termine di ricerca in modo che tutti i termini regex-significativo nel testo digitato dall'utente sono trattati come testo normale. Ad esempio, il punto (.) È significativo per regex. Ho imparato di questa funzione escapeRegex leggendo il codice sorgente di completamento automatico.
• la linea con new Regexp(). Si specifica un'espressione regolare che inizia con ^ (circonflesso), il che implica, essa corrisponderà solo quando i caratteri digitati appaiono all'inizio del termine nella matrice, che è quello che si voleva. Esso utilizza anche l'opzione "i", che implica una corrispondenza case-insensitive.
• l'utilità $.grep() chiama semplicemente la funzione fornita su ciascun termine nella matrice fornita. La funzione in questo caso utilizza semplicemente l'espressione regolare per vedere se il termine nella matrice è una partita per quello che è stato digitato.
• , infine, il responseFn () viene richiamato con il risultato della ricerca.

demo funzionante: http://jsbin.com/ezifi

come si presenta:

Solo una nota: ho trovato la documentazione di completamento automatico di essere abbastanza immaturo a questo punto. Non ho trovato esempi che ha fatto questo, e non riuscivo a trovare il documento di lavoro sul quale sono stati necessari o quali classi css sarebbero stati utilizzati i file .css. Ho imparato tutto questo da ispezionare il codice.

Vedere anche, come posso personalizzato -format il completamento automatico plug-in risultati?

Answer 2

Io uso il completamento automatico da devbridge. http://www.devbridge.com/projects/autocomplete/jquery/

Si abbina sui personaggi che cominciano, solo.

Per quanto riguarda la corrispondenza in base a nome o cognome, si era appena tenuto a fornire una lista di ricerca con il nome e cognome.

Esempio di utilizzo:

  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
      };

L'opzione lookup che si passa per inizializzare il controllo del completamento automatico può essere una lista o di un oggetto. Quanto sopra ha mostrato un elenco semplice. Se si desidera che alcuni dati allegati ai suggerimenti che vengono restituiti, poi fare l'opzione lookup un oggetto, in questo modo:

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

Answer 3

thx cheeso per intrducing jsbin.com,

ho esteso il codice per supportare le partite Nome e cognome, anche.

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

Se si desidera cercare l'inizio di ogni parola nella stringa, una soluzione più elegante per scagnozzo di è quello di prendere cheeso di ma basta usare la parola espressione regolare carattere speciale di confine:

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

Esempio: http://jsbin.com/utojoh/2 (provare a cercare 'bl' )

Answer 5

Non c'è un altro completamento automatico jQuery plug-in che opzionalmente ricerche solo all'inizio di ogni oggetto (l'opzione è matchContains=false , penso che sia il default troppo).

In assenza di una tale opzione nel plugin jQuery UI, sto cercando di indovinare dovrete sia per utilizzare un plugin diverso, o riscrivere quello che si sta usando ora.

Answer 6

Dove stai ottenendo i dati per popolare il completamento automatico? E 'da un database? Se è così, si può fare ciò che si vuole nella query e restituire solo i risultati che corrispondono all'inizio di ogni parola (nome / cognome)