javascript - jQuery 自动完成 : downsize list on value input field

标签 javascript jquery-ui jquery-ui-autocomplete

当给出 1 个参数时(在与搜索字段不同的字段中),如何过滤列表。例如,用户指定组“Test”并开始在#ContactPerson 字段中搜索。我只想要显示 "group":"Test"的记录。

   ("#ContactPerson").autocomplete({
              source: [{"value":"XYZ","name":"ZJL","group":"Test"},...]
    ...

这是我到目前为止所尝试过的,但它不起作用:http://jsfiddle.net/71puvk59/

最佳答案

根据this answer您可以覆盖搜索功能并应用所有过滤器。

就您而言:

 var source = [
    {"value": "JL", "name": "JL", "group": "Test"},
    {"value": "MV", "name": "MV", "group": "Family"}
];

$('#ContactPerson').autocomplete({
    source: source,
    search: function (oEvent, oUi) {
        // get current input value
        var sValue = $(oEvent.target).val();

        //groupValue
        var groupValue = $("#group").val();

        // init new search array
        var aSearch = [];

        // for each element in the source array ...
        $(source).each(function (iIndex, sElement) {

            var groupFilterMatch = ((groupValue && sElement.group.indexOf(groupValue) != -1) || !groupValue);
            var nameFilterMatch = sElement.name.indexOf(sValue) != -1;

            // ... APPLY YOUR FILTERS HERE
            //Example: filter group, if it is defined, and filter name
            if (groupFilterMatch && nameFilterMatch) {
                // add element
                aSearch.push(sElement);
            }
        });

        // change search array
        $(this).autocomplete('option', 'source', aSearch);
    }
});

http://jsfiddle.net/vcarvalho/91Lj5nxx/

关于javascript - jQuery 自动完成 : downsize list on value input field,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25996377/

相关文章:

javascript - 防止 React JS 覆盖脚本

javascript - 禁用 onClick 函数的内容并稍后重用?

javascript - 单击按钮时 JS 函数未命中

javascript - JQuery自动完成如何在自动完成文本输入中写标签?

jquery ui 自动完成 - 如何?

javascript - 如何获取 HTML 中的文本和 href 值,然后将它们设置为 JQuery UI 自动完成中的值和标签

Javascript - 等待大量异步回调返回?

javascript - 键入时不显示 jQuery UI 自动完成

MVC3 的 jquery 日期时间选择器日期时间格式问题

jquery - 页面加载时打开第一个 child