3

リスト内の有効な従業員のみを選択するためのオートコンプリート プラグインを設定したいと考えています。EmployeeID と EmployeeName を持つ Employee オブジェクトの配列があります。現在、すべての従業員の EmployeeName を配列にコピーし、それを供給してオートコンプリート プラグインをセットアップすることにより、EmployeeName のオートコンプリートをロードしました。

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

それは仕事をしますが、私が望むのは、ユーザーがこのテキストボックスに EmployeeID を入力したい場合、提案に EmployeeNames を表示しますが、EmployeeID にも提案フィルタリングをロードすることです。それを実装する方法はありますか、どこかで見たのは覚えていますが、ウェブサイトは思い出せません。

4

1 に答える 1

8

オブジェクトを使用している場合、jQueryUI には値および/またはラベル フィールドが必要です。

複数のタイプがサポートされています:

Array : 配列はローカル データに使用できます。次の 2 つの形式がサポートされています。 文字列の配列: [ "Choice1", "Choice2" ]

label プロパティと value プロパティを持つオブジェクトの配列: [ { label: "Choice1", value: "value1" }, ... ] label プロパティは提案メニューに表示されます。ユーザーが項目を選択すると、値が入力要素に挿入されます。プロパティを 1 つだけ指定すると、両方に使用されます。たとえば、値プロパティのみを指定すると、その値がラベルとしても使用されます。

ソース: http://api.jqueryui.com/autocomplete/#option-source

そのことを念頭に置いて、名前に割り当てるだけの値プロパティを含めるために、データを採用する必要があります(例: $.each(employees, function(){ this.value = this.name });...)

もう 1 つ定義する必要があるのは、どのようにフィルタリングするかです。これは、 sourceを定義することで実行できます。

例：

    $("#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);
        }
    });

フィドラーの例: http://fiddle.jshell.net/YJkTr/

完全なコード:

<!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>
于 2013-03-07T10:39:37.477 に答える