jQuery UI 自动完成 - 基于 json 节点搜索

Question

我正在尝试根据学校名称进行搜索，选择学校名称后填写表格。

我在搜索那个特定的 jSON 节点时遇到了一些问题，在这种情况下是 name 我已经得到 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
                    };
                }));
        });
}

上面的代码将使用正则表达式 (new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" )) 过滤数据。此正则表达式将搜索 start-begin(^) 与键入的文本（由用户）的名称。正则表达式中的 'i' 用于 case-insensitive 而 escapeRegex 只会转义用户输入中的任何特殊字符。

您也可以使用您的代码并进行相应的更改，我认为它也可以。我只是更喜欢使用 $.getJSON。注意 id 的 #school_name（在您的代码中，您使用的是“.”）

在这里试试：http://jsbin.com/vawozutepu

jQuery UI 自动完成 - 基于 json 节点搜索

jQuery UI Autocomplete - Search based on a json node

javascript

jquery

json

jquery-ui-autocomplete