jQuery UI Autocomplete-Widget-Suchkonfiguration

In jQuery UI-v1.8rc3, das autocomplete-widget akzeptiert eine Quelle option kann entweder ein string, ein array oder eine callback-Funktion. Wenn es ein string, autocomplete funktioniert ein GET auf die URL zu erhalten Optionen/Anregungen. Wenn ein array autocomplete funktioniert die Suche, wie gesagt, für die Gegenwart des typisierten chars in jeder position in Bezug auf das array. Die Letzte Variante ist, was Sie wollen - die callback-Funktion.

Aus der AutoVervollständigen-Dokumentation:

Die Dritte Variante, der Rückruf, bietet die größte Flexibilität und kann verwendet werden, um die Verbindung einer beliebigen Datenquelle AutoVervollständigen. Der callback erhält zwei Argumente:

• request Objekt mit einer einzigen Eigenschaft, die man als "Begriff", das bezieht sich auf den Wert derzeit in der Texteingabe. Zum Beispiel, wenn der Benutzer eingegeben "new yo" in einer Stadt, Feld, dass gesetzt ist, zu tun, autocomplete, die request.term halten wird "new yo".

• Eine response Funktion, einen Rückruf erwartet ein einziges argument enthalten, das Daten zu empfehlen, um den Benutzer. Diese Daten gefiltert werden sollen, basierend auf den vorhandenen Begriff, und muß ein array in dem format erlaubt für einfache lokale Daten: String-Array oder ein Objekt-Array mit label/Wert/beide Eigenschaften.

Beispiel-code:

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

Ein paar wichtige Punkte:

• der Aufruf $.ui.autocomplete.escapeRegex(req.term); Dass entweicht den Suchbegriff
  so, dass jeder regex-aussagekräftige Begriffe im text vom Benutzer eingegeben werden behandelt, als plain-text. Zum Beispiel der Punkt (.) von Bedeutung ist regex. Ich erfuhr von diesem escapeRegex Funktion durch das Lesen der autocomplete-source-code.
• die Zeile mit new Regexp(). Es gibt eine regexp Beginn mit ^ (Zirkumflex), was bedeutet, es passen nur, wenn die eingegebenen Zeichen erscheinen am Anfang der Laufzeit im array, was ist das, was Sie wollte. Es nutzt auch die "ich" - option, was bedeutet, ein groß-und Kleinschreibung.
• die $.grep() Dienstprogramm ruft einfach die bereitgestellte Funktion auf jeden Begriff in die bereitgestellten Arrays. Die Funktion in diesem Fall nutzt einfach die regexp um zu sehen, ob der Begriff in der Reihe ist ein Spiel für das, was eingegeben wurde.
• schließlich die responseFn() aufgerufen wird, mit dem Ergebnis der Suche.

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

sieht es aus:

Nur eine Anmerkung: ich finde die Dokumentation auf AutoVervollständigen ziemlich unreif an dieser Stelle. Ich finde nicht Beispiele, die dies Taten, und ich konnte Sie nicht finden, working doc auf das .css-Dateien notwendig waren, oder die .css-Klassen verwendet werden würde. Das alles erfuhr ich von der überprüfung des Codes.

Siehe auch wie kann ich custom-format das AutoVervollständigen-plug-in die Ergebnisse?

InformationsquelleAutor der Antwort Cheeso

thx cheeso für intrducing jsbin.com,

erweiterte ich den code zur Unterstützung, vor - und Nachname passt auch.

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

geben Sie 'ein' oder 're'

InformationsquelleAutor der Antwort Phil Rykoff

Gibt es ein weiteres jQuery-autocomplete-plug-in , Optional Recherchen erst am Anfang von jedem Artikel (die option ist matchContains=false, ich denke, das ist auch voreingestellt).

Angesichts des Fehlens einer solchen option in der jQuery-UI-plugin, ich vermute, Sie müssen entweder verwenden Sie ein anderes plugin, oder schreiben die, die Sie derzeit verwenden.

InformationsquelleAutor der Antwort Paul D. Waite