jQuery UI自動完成-基於json節點進行搜索

Question

選擇學校名稱后，我會嘗試根據學校名稱進行搜索。

我在那個特定的jSON節點上搜索時遇到一些問題，在這種情況下，這個名字就是我可以使用JSON響應的名稱 ，但這只是將所有內容返回。 沒有特定的術語。

我的jSON數據的示例：

[
  {
    "name":"The Mendip School",
    "ta":"ta552023",
    "address1":"Longfellow Road",
    "address2":"Radstock",
    "town":"",
    "postcode":"BA3 3AL"
  }
]

我的jQuery如下：

// School Search....
var data_source = 'schools.json';

$(".school_name").autocomplete({
    source: function ( request, response ) {
        $.ajax({
            url: data_source,
            dataType: "json",
            data: {
                term: request.term
            },
            success: function (data) {
                response( $.map( data, function ( item )
                {
                    return {
                        label: item.name,
                        value: item.name
                    };
                }));
            }
        });
    },
    minLength: 3,
    focus: function (event, ui) {
        $(event.target).val(ui.item.label);
        return false;
    },
    select: function (event, ui) {
        $(event.target).val(ui.item.label);
        window.location = ui.item.value;
        return false;
    }
});

如何修改我的JQuery以在名稱字段上進行搜索？ 我還需要獲取其他字段來填充輸入字段。

謝謝

Answer 1

這可能符合您的需求：

$("#school_name").autocomplete({
    source: function ( request, response ) {
    var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
    $.getJSON("/schools.json?term=" + request.term, function (data) {

            var x = $.grep(data, function (item, index) {
                    return matcher.test( item.name );
                });
                console.log(x);
            response($.map(x, function (item) {
                    return {
                        label: item.name,
                        value: item.name
                    };
                }));
        });
}

上面的代碼將使用regex（ new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" ) ）過濾數據。 此正則表達式將搜索以鍵入的文本（由用戶）開始（^）的名稱。 正則表達式中的'i'不區分大小寫，而escapeRegex只會在用戶輸入中轉義任何特殊字符。

您還可以使用您的代碼並進行相應的更改，我認為它也將起作用。 我只喜歡使用$ .getJSON。 注意ID的#school_name（在您的代碼中，您使用的是“。”）

在這里嘗試： http : //jsbin.com/vawozutepu