按姓名和家庭搜索，但在 jquery 自动完成中显示帐号答案

【问题标题】：Search by name and family but display account number in jquery autocomplete按姓名和家庭搜索，但在 jquery 自动完成中显示帐号
【发布时间】：2014-01-13 07:35:32
【问题描述】：

我正在编写一段代码，它使用 jquery ui 自动完成组件来过滤搜索的项目。我必须对其进行配置才能基于多种因素进行搜索，这是我的示例搜索数组：

    var availableTags = [{
    name: "Smith",
    family: "Johnson",
    account_number: "10032",
    nick_name: "Friend account",
    }, {
    name: "Susan",
    family: "Rice",
    account_number: "343243",
    nick_name: "Mom Account",
    }, {
    name: "Joe",
    family: "Austin",
    account_number: "3434",
    nick_name: "Partner Account",
    }, {
}];

显示建议框时，自动完成应显示姓名、家庭、帐号和昵称。但只选择每个项目，只有Consum_Number必须插入文本框中。用户还必须能够搜索姓名、家庭、帐号和昵称。我怎样才能实现这个目标？

【问题讨论】：

标签： javascript jquery jquery-ui jquery-ui-autocomplete

【解决方案1】：

你需要：

修改数据数组以包含 value 参数（这允许自动完成以在焦点/选择时填充输入）
编写一个自定义的source 函数，根据用户输入的内容过滤数据
编写一个自定义的_renderItem 函数，以显示您喜欢的格式的数据

所以你有：

var userData = [{
    name: "Smith",
    family: "Johnson",
    value: "10032",
    nick_name: "Friend account"
}, {
    name: "Susan",
    family: "Rice",
    value: "343243",
    nick_name: "Mom Account"
}, {
    name: "Joe",
    family: "Austin",
    value: "3434",
    nick_name: "Partner Account"
}];
$("#autocomplete").autocomplete({
    source: function (request, response) {
        var search = $.trim(request.term.toLowerCase());
        var array = $.grep(userData, function (val) {
            return
                val.name.toLowerCase().indexOf(search) >= 0 ||
                val.family.toLowerCase().indexOf(search) >= 0 ||
                val.value.toLowerCase().indexOf(search) >= 0 ||
                val.nick_name.toLowerCase().indexOf(search) >= 0;
        });
        response(array);
    }
})

.data("ui-autocomplete")._renderItem = function (ul, item) {
    var $a = $("<a></a>").text(item.name + " " + item.family);
    $("<br />").appendTo($a);
    $("<small></small>").text(item.nick_name).appendTo($a);
    $("<br />").appendTo($a);
    $("<small></small>").text(item.value).appendTo($a);
    return $("<li></li>").append($a).appendTo(ul);
};

Demo here

【讨论】：