jQuery UI automatische Vervollständigung Widget Konfiguration suchen

Question

Ich bin auf der Suche in mit der jQuery UI zum automatischen Vervollständigung Widget Benutzer-Lookup durch erste oder letzte implementieren Name. Es sieht aus wie standardmäßig die automatische Vervollständigung Worte durch Zeichenfolge sucht nicht ihr Auftreten in einem Wort Materie. Also, wenn Sie Daten haben, wie: javascript, asp, haskell und Sie in 'as' geben Sie sich über alle drei bekommen. Ich würde es nur gerne Übereinstimmen des Wortes beginnen. So in obigem Beispiel erhalten Sie nur 'asp'. Gibt es eine Möglichkeit, die die automatische Vervollständigung Widget zu konfigurieren, dies zu tun?

Schließlich wäre es besser, selbst zu Spiel von den Vor- oder Nachnamen beginnen wie ist es in Google Mail.

Hinweis: Ich versuche, einen Weg zu Figur Widget speziell diese mit dem jQuery UI zu tun. Da ich bereits jQuery UI in meinem Projekt verwenden, ich plane dabei zu bleiben und nicht versuchen, das Hinzufügen von zusätzlichen Bibliotheken auf meine Web-Anwendung.

Answer 1

In jQuery UI v1.8rc3, die zur automatischen Vervollständigung Widget akzeptiert eine source Option, die entweder eine Zeichenfolge sein kann, ein Array oder eine Rückruffunktion. Wenn es sich um eine Zeichenfolge ist, die automatische Vervollständigung funktioniert ein GET auf diesem URL-Optionen / Anregungen zu bekommen. Wenn ein Array, die automatische Vervollständigung führt eine Suche, wie Sie wies darauf hin, für das Vorhandensein der getippten Zeichen in einer beliebigen Position in den Bedingungen des Arrays. Die letzte Variante ist das, was Sie wollen - die Callback-Funktion.

Von der Autocomplete-Dokumentation:

  

Die dritte Variante der Rückruf, bietet die Flexibilität, und verwendet wird, kann jede Datenquelle automatisch vervollständigen zu verbinden. Der Rückruf erhält zwei Argumente:

     

• A request Objekt mit einer einzigen Eigenschaft namens „Begriff“, die derzeit in der Texteingabe auf den Wert bezieht. Zum Beispiel, wenn der Benutzer „neu yo“ in einer Stadt Feld eingegeben, das gesetzt wird die automatische Vervollständigung zu tun, wird die request.term „neu yo“ halten.
  • A response Funktion, ein Rückruf, die ein einziges Argument erwartet, die Daten zu enthalten, um den Benutzer vor. Diese Daten sollten auf der Grundlage der vorgesehenen Laufzeit gefiltert werden, und muss ein Array in dem Format für einfache lokale Daten gestattet werden: String-Array oder Objekt-Array mit Label / Wert / beide 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 );
    }
});

Ein paar wichtige Punkte:

• , um den Anruf $.ui.autocomplete.escapeRegex(req.term);, dass entkommt den Suchbegriff so dass jede sinnvolle regex-Begriffe in dem Text durch den Benutzer eingegeben werden, als Klartext behandelt. Zum Beispiel ist der Punkt (.) Sinnvoll regex. Ich erfuhr von dieser escapeRegex Funktion von dem Autocomplete-Quellcode zu lesen.
• die Zeile mit new Regexp(). Es gibt einen regulären Ausdruck mit ^ (Zirkumflex) beginnen, was bedeutet, es wird nur entsprechen, wenn die eingegebenen Zeichen am Anfang des Wortes im Array, das ist das, was Sie wollten. Es nutzt auch die „i“ Option, die Groß- und Kleinschreibung Spiel impliziert.
• das $.grep() Dienstprogramm ruft nur die bereitgestellte Funktion auf jedem Ausdruck in der bereitgestellten Array. Die Funktion in diesem Fall verwendet einfach den regulären Ausdruck, um zu sehen, ob der Begriff in dem Array ist ein Spiel für das, was geschrieben wurde.
• schließlich die responseFn () mit dem Ergebnis der Suche aufgerufen.

Arbeits Demo: http://jsbin.com/ezifi

, wie es aussieht:

Nur ein Hinweis: Ich habe die Dokumentation über die automatische Vervollständigung finde ziemlich unreif an dieser Stelle zu sein. Ich habe keine Beispiele finden, die das tat, und ich konnte nicht arbeiten doc finden, auf dem CSS-Dateien notwendig waren oder welche CSS-Klassen verwendet werden würde. Ich habe gelernt, dies alles von dem Code Inspektion.

Siehe auch wie kann ich benutzerdefinierte -format die automatische Vervollständigung Plug-in-Ergebnisse?

Answer 2

Ich verwende das die automatische Vervollständigung von devbridge. http://www.devbridge.com/projects/autocomplete/jquery/

Sie paßt auf den Anfangszeichen, nur.

Was Anpassung basierend auf Vornamen oder Nachnamen, dann würden Sie nur eine Lookup-Liste mit den Vor- und Nachnamen liefern müssen.

Beispiel Nutzung:

  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, dass Sie die Autovervollständigung Steuerung initialisieren passieren zu können eine Liste sein, oder ein Objekt. Die oben eine einfache Liste zeigte. Wenn Sie einige Daten an die Vorschläge gebunden wollen, die zurückgegeben bekommen, dann ist die lookup Option machen ein Objekt, wie folgt aus:

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

Answer 3

thx cheeso für intrducing jsbin.com,

i erweitert Code Vor- und Nachnamen Spiele zu unterstützen, 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/

Typ 'ein' oder 're'

Answer 4

Wenn Sie den Anfang jedes Wort in der Zeichenfolge, eine elegantere Lösung zu Gefolgsmann der gesucht werden soll ist cheeso des zu nehmen, aber benutzen Sie einfach die regexp Wortgrenze Sonderzeichen:

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

Beispiel: http://jsbin.com/utojoh/2 (versuchen Sie für die Suche 'bl' )

Answer 5

Es gibt andere jQuery Autocomplete-Plug-in dass optional sucht nur zu Beginn jeder Artikel (die Option matchContains=false , ich denke, das ist die Standardeinstellung auch).

Das Fehlen einer solchen Option in der jQuery UI-Plugin gegeben, ich vermute, Sie werden entweder ein anderes Plugin verwenden müssen, oder neu schreiben das Sie jetzt verwenden sind.

Answer 6

Wo bekommen Sie die Daten, die die automatische Vervollständigung zu füllen? Ist es aus einer Datenbank? Wenn ja, können Sie tun, was Sie in Ihrer Anfrage möchten und nur Ergebnisse angezeigt, die den Beginn eines jeden Wortes übereinstimmen (Vor- / Nachname)