Filter Jquery AutoComplete durch mehrere Werte an ein array von Objekten

Ich möchte die Einrichtung autocomplete-plugin für die Auswahl nur die gültig, die Mitarbeiter in der Liste. Ich habe ein array von Employee-Objekten, mit EmployeeID und EmployeeName. Derzeit habe ich geladen, die autocomplete für die EmployeeName durch das kopieren aller Mitarbeiter EmployeeName in ein array und Einspeisung, um den setup-autocomplete-plugin.

var employeeNames = new Array();
for (var i = 0 ; i < employees.length ; i++)
{
    employeeNames[a] = employees.Employee[a].Name;
}
$("#txtEmployeeName").autocomplete(employeeNames, {
    multiple: true,
    mustMatch: true,
    autoFill: true
});

Es wird die Arbeit zu tun, aber WAS ich WILL, IST, dass, wenn der Benutzer eingeben will, EmployeeID in dieses Textfeld, lädt es den Vorschlag Filterung auf EmployeeID zu, obwohl es wird sich zeigen, EmployeeNames in den Kommentaren. Gibt es eine Möglichkeit, ich könnte implementieren, dass, ich erinnere mich, ich sah es irgendwo, aber nicht daran erinnern, die website.

InformationsquelleAutor Taha Rehman Siddiqui | 2013-03-07

  1. 8

    jQueryUI ein Wert erforderlich ist und/oder der label-Feld, wenn Sie ein Objekt verwenden:

    Mehrere Typen unterstützt:

    Array: Ein array kann verwendet werden, für lokale Daten. Es gibt zwei unterstützte Formate: Ein array von strings: [ "Choice1", "Auswahl2" ]

    Ein array von Objekten mit label und value-Eigenschaften: [ { label: "Choice1", value: "Wert1" }, ... ] Die label-Eigenschaft wird angezeigt
    im Menü "Vorschlag". Der Wert wird in das Eingabefeld eingefügt
    element, wenn ein Benutzer ein Element auswählt. Wenn nur eine Eigenschaft ist
    angegeben ist, wird es für beide verwendet werden, z.B., wenn Sie nur Wert
    Eigenschaften, wird der Wert auch verwendet werden, wie das label.

    Quelle: http://api.jqueryui.com/autocomplete/#option-source

    Mit diesem im Verstand, den Sie zu übernehmen, Ihre Daten, schließen Sie die value-Eigenschaft, die Sie geben Sie einfach den Namen (z.B. $.each(employees, function(){ this.value = this.name }); ...)

    Nun die andere Sache, die Sie haben, um zu definieren, wie Sie wollen, zu filtern. Dies kann durch die Festlegung der Quelle.

    Beispiel:

        $("#txtEmployeeName").autocomplete({
        source: function (request, response) {
            var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");

            var matching = $.grep(employees, function (value) {
                var name = value.value;
                var id = value.id;

                return matcher.test(name) || matcher.test(id);
            });
            response(matching);
        }
    });

    Fiddler Beispiel: http://fiddle.jshell.net/YJkTr/

    Vollständige code: 

    <!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>


    <script>
        $(function () {
            var employees = [
                { "value": "Tom", "id": "1" },
                { "value": "Stefan", "id": "2" },
                { "value": "Martin", "id": "3" },
                { "value": "Sara", "id": "4" },
                { "value": "Valarie", "id": "5" },
            ]

            $("#txtEmployeeName").autocomplete({
                source: function (request, response) {
                    var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");

                    var matching = $.grep(employees, function (value) {
                        var name = value.value;
                        var id = value.id;

                        return matcher.test(name) || matcher.test(id);
                    });
                    response(matching);
                }
            });
        });
    </script>
</head>
<body style="font-size: 62.5%;">
    <div class="ui-widget">
        <form>
            <label for="txtEmployeeName">Developer:</label>
            <input id="txtEmployeeName" />
        </form>
    </div>
</body>
</html>
    Danke, ich habe den Titel geändert, damit es leichter gefunden werden können
    Ich habe noch eine Frage Stefan, wie zu binden AutoVervollständigen auf das select-Ereignis. Wie gerne würde ich entfernen, das posten von Kommentaren, die ich gerade ausgewählt haben. Wie mache ich das?
    fand heraus, dass ^
    Toll, ich habe#t sehen Ihren Kommentar.
    Hallo Stefan, wie dies zu erreichen, mit der jquery mobile ? Ich habe nicht wieder eine Lösung, um die gleiche Arbeit.

    InformationsquelleAutor Stefan

Schreibe einen Kommentar