wake-up-neo.net

Konfiguration der Widget-Suche für die automatische Vervollständigung der jQuery-Benutzeroberfläche

Ich möchte das Widget jQuery UI autocomplete verwenden, um die Benutzersuche nach Vor- oder Nachname zu implementieren. Es sieht so aus, als würde die automatische Vervollständigung Wörter unabhängig von ihrem Vorkommen in einem Wort nach Zeichenfolgen durchsuchen. Wenn Sie also Daten haben wie: javascript, asp, haskell und Sie geben 'as' Sie werden alle drei bekommen. Ich möchte, dass es nur zum Wortanfang passt. Im obigen Beispiel erhalten Sie also nur 'asp'. Gibt es eine Möglichkeit, das Widget für die automatische Vervollständigung zu konfigurieren, um dies zu tun?

Letztendlich wäre es sogar besser, Übereinstimmung nach Vor- oder Nachname wie in Google Mail zu verwenden.

Hinweis: Ich versuche, mithilfe des Widgets für die jQuery-Benutzeroberfläche eine Möglichkeit zu finden, dies zu tun. Da ich in meinem Projekt bereits jQuery UI verwende, plane ich, mich daran zu halten und zu versuchen, meiner Webanwendung keine zusätzlichen Bibliotheken hinzuzufügen.

65
dev.e.loper

In jQuery UI v1.8rc3 akzeptiert das Widget für die automatische Vervollständigung eine Quelle -Option, die entweder eine Zeichenfolge, ein Array oder eine Rückruffunktion sein kann. Wenn es sich um eine Zeichenfolge handelt, führt die automatische Vervollständigung ein GET für diese URL durch, um Optionen/Vorschläge abzurufen. Wenn es sich um ein Array handelt, führt die automatische Vervollständigung, wie Sie bereits betont haben, eine Suche nach den eingegebenen Zeichen an einer beliebigen Position im Array durch. Die letzte Variante ist, was Sie wollen - die Rückruffunktion.

Aus der Autocomplete-Dokumentation:

Die dritte Variante, der Callback, bietet die größte Flexibilität und kann zum Verbinden einer beliebigen Datenquelle mit Autocomplete verwendet werden. Der Rückruf erhält zwei Argumente:

• Ein request -Objekt mit einer einzelnen Eigenschaft namens "term", die sich auf den aktuell in der Texteingabe enthaltenen Wert bezieht. Wenn der Benutzer beispielsweise "new yo" in ein Stadtfeld eingibt, das für die automatische Vervollständigung eingestellt ist, enthält request.term "New yo".
• Eine response -Funktion, ein Rückruf, der erwartet, dass ein einzelnes Argument die Daten enthält, die dem Benutzer vorgeschlagen werden sollen. Diese Daten sollten basierend auf dem angegebenen Begriff gefiltert werden und müssen ein Array in dem Format sein, das für einfache lokale Daten zulässig ist: String-Array oder Object-Array mit label/value/both-Eigenschaften.

Beispielcode:

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

Einige wichtige Punkte:

  • der Aufruf von $.ui.autocomplete.escapeRegex(req.term); Dass dem Suchbegriff entgeht , sodass alle regulären Begriffe im vom Benutzer eingegebenen Text als behandelt werden Klartext. Beispielsweise ist der Punkt (.) Für reguläre Ausdrücke von Bedeutung. Ich habe durch Lesen des Autocomplete-Quellcodes von dieser escapeRegex-Funktion erfahren.
  • die Zeile mit new Regexp(). Es gibt einen regulären Ausdruck an, der mit ^ (Circumflex) beginnt, was impliziert, dass er nur dann übereinstimmt, wenn die eingegebenen Zeichen am Anfang des Begriffs im Array erscheinen. Es wird auch die Option "i" verwendet, die eine Übereinstimmung ohne Berücksichtigung der Groß-/Kleinschreibung impliziert.
  • das Dienstprogramm $.grep() ruft die angegebene Funktion für jeden Begriff im angegebenen Array auf. In diesem Fall verwendet die Funktion einfach den regulären Ausdruck, um festzustellen, ob der Begriff im Array mit dem eingegebenen übereinstimmt.
  • schließlich wird die responseFn () mit dem Ergebnis der Suche aufgerufen.

arbeitsdemo: http://jsbin.com/ezifi

wie es aussieht:

alt text

Nur eine Anmerkung: Ich finde die Dokumentation zu Autocomplete an dieser Stelle ziemlich unausgereift. Ich habe keine Beispiele dafür gefunden, und ich konnte kein Arbeitsdokument finden, für das CSS-Dateien erforderlich waren oder die CSS-Klassen verwendet würden. All das habe ich durch das Überprüfen des Codes gelernt.

Siehe auch wie kann ich die Ergebnisse des Autocomplete-Plug-Ins benutzerdefiniert formatieren?

127
Cheeso

Ich benutze das Autocomplete von Devbridge. http://www.devbridge.com/projects/autocomplete/jquery/

Es stimmt nur mit den Anfangsbuchstaben überein.

alt text

Bei Übereinstimmungen basierend auf Vor- oder Nachnamen müssen Sie lediglich eine Nachschlageliste mit Vor- und Nachnamen angeben.

Anwendungsbeispiel:

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

Die lookup -Option, die Sie zum Initialisieren des Autocomplete-Steuerelements übergeben, kann eine Liste oder ein Objekt sein. Das obige zeigte eine einfache Liste. Wenn Sie möchten, dass einige Daten an die zurückgegebenen Vorschläge angehängt werden, machen Sie die Option lookup zu einem Objekt wie folgt:

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

thx cheeso für das Einführen von jsbin.com,

ich habe deinen Code erweitert, um auch Übereinstimmungen mit Vor- und Nachnamen zu unterstützen.

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

tippe 'an' oder 're'

5
Phil Rykoff

Wenn Sie den Anfang jedes Wortes in der Zeichenfolge suchen möchten, ist es eine elegantere Lösung für Handlanger, Cheesos zu verwenden, aber nur das Sonderzeichen für die reguläre Wortgrenze zu verwenden:

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

Beispiel: http://jsbin.com/utojoh/2 (versuchen Sie, nach 'bl' zu suchen)

2
Nader

Woher beziehen Sie die Daten, um die automatische Vervollständigung zu füllen? Ist es aus einer Datenbank? In diesem Fall können Sie in Ihrer Abfrage das tun, was Sie möchten, und nur Ergebnisse zurückgeben, die mit dem Anfang jedes Wortes (Vor-/Nachname) übereinstimmen.

0
Mark

Es gibt ein weiteres Plug-in für die automatische Vervollständigung von jQuery , das optional nur am Anfang jedes Elements sucht (die Option ist matchContains=false , ich denke, das ist auch die Standardeinstellung).

Angesichts des Fehlens einer solchen Option im Plugin für die jQuery-Benutzeroberfläche müssen Sie entweder ein anderes Plugin verwenden oder das derzeit verwendete Plugin neu schreiben.

0
Paul D. Waite