Das Autocomplete-Widget von jQuery UI * eigentlich * automatisch vervollständigen

Question

Ich brauche eine Auto-Vervollständigung in der App, an der ich arbeite, und da ich bereits jQuery UI verwende, versuche ich, das Autocomplete-Widget auf meine Bedürfnisse abzustimmen.

Der erste Schritt besteht darin, den Suchbegriff nur am Anfang der vorgeschlagenen Begriffe zu finden. Ich habe das schon funktioniert, wie Sie in dem Code unten sehen können. Schritt zwei ist, den ersten Vorschlag tatsächlich Autovervollständigen zu haben.

Was wahrscheinlich ein wenig Erklärung erfordert. Wenn ich "Autocomplete" höre, stelle ich mir vor, "f" einzugeben und den Inhalt des Textfelds auf "foo" zu ändern, wobei "oo" ausgewählt wird, sodass es ersetzt wird, wenn ich ein anderes Zeichen eingabe und im Feld if belasse Ich lasse es raus. Normalerweise würde ich das, was das Autocomplete-Widget vorschlägt, eher als Autovervollständigung nennen.

Betrachtet man, wie die automatische Vervollständigung arbeitet intern, ich denke, die autocompleteopen Veranstaltung der richtige Ort ist, dies zu tun (es jedes Mal, wenn die Liste der Vorschläge genannt aktualisiert wird), aber ich bin ratlos, wie der Vorschlag, für den Zugriff auf Liste von dort.

Irgendwelche Gedanken?

$("#field").autocomplete({ 
    delay: 0, 

    source: function filter_realms(request, response) { 
     var term = request.term.toLowerCase(); 
     var length = term.length; 

     response($.grep(candidates, function(candidate) { 
      return candidate.substring(0, length).toLowerCase() === term; 
     })); 
    }, 

    open: function(event, ui) { 
     // magic happens here? 
    } 
}); 

Answer 1

Verstanden. Ich hatte vergessen, dass Widgets über .data() zugegriffen werden können.

Answer 2

Nahm den Längenprüfabschnitt und änderte die Filterfunktion innerhalb der Suche. Auf diese Weise können Sie die JSON-Behandlung der Benutzeroberfläche nutzen.

filter: function(array, term) { 
    var matcher = new RegExp($.ui.autocomplete.escapeRegex(term), "i"); 

    var smatcher = term.toLowerCase(); 
    var length = smatcher.length; 


    return $.grep(array, function(value) { 
       if(value.label.substring(0, length).toLowerCase() == smatcher){ 
        return matcher.test(value.label || value.value || value); 
       } 
    });