Jquery UI自动完成:从一个数组的多个属性中搜索

Question

嗨,我正在尝试让jQuery UI自动完成小部件工作,以便它搜索来自我的数组的多个属性的匹配(不仅仅是默认情况下它的一个).

我已经搞乱了他们的例子,但是我仍然不确定如何解决这个问题.

http://jsfiddle.net/FUZPN/

这是我的数组格式 script

var projects = [
    {
        value: "jquery",
        label: "jQuery",
        desc: "the write less, do more, JavaScript library",
        other: "9834275 9847598023 753425828975340 82974598823"
    },
    {
        value: "jquery-ui",
        label: "jQuery UI",
        desc: "the official user interface library for jQuery",
        other: "98 83475 9358 949078 8 40287089754 345 2345"
    },
    {
        value: "sizzlejs",
        label: "Sizzle JS",
        desc: "a pure-JavaScript CSS selector engine",
        other: "49857 2389442 573489057 89024375 928037890"
    }

我正在寻找的是,如果你输入"write",第一个元素应该在自动完成中弹出,同样如果你输入"jq",前两个元素应该弹出.

---

根据文件:

数组:数组可用于本地数据.有两种支持的格式:

• 字符串数组: [ "Choice1", "Choice2" ]

• 具有label和value属性的对象数组: [ { label: "Choice1", value: "value1" }, ... ]

该标签属性显示在建议菜单.当用户选择项目时,该值将插入到input元素中.如果仅指定了一个属性,则它将用于两者,例如,如果仅提供值属性,则该值也将用作标签.

我如何(硬)编码它所以源使用2个标签(label和desc？)而不是一个标签？

---

(对不起,我已经搜索了很多类似的问题,但是它们都针对多个来源,因为我只有1个数组,所以不在这里.是吗？)

Answer 1

自动填充接受第三种类型的源,即一种函数,它可以以您认为合适的方式提供数据:

第三种变体是回调,它提供了最大的灵活性,可用于将任何数据源连接到自动完成.回调有两个参数:

• 具有单个术语属性的请求对象,它引用文本输入中当前的值.例如,如果用户在城市字段中输入"new yo",则自动完成术语将等于"new yo".
• 一个响应回调,它需要一个参数:向用户建议的数据.应根据提供的术语过滤此数据,并且可以采用上述任何简单本地数据格式.在提供自定义源回调以处理请求期间的错误时,这很重要.即使遇到错误,也必须始终调用响应回调.这可确保窗口小部件始终具有正确的状态.

这意味着你可以写这样的东西

$( "#project" ).autocomplete({
    source: function (request, response) {
        // request.term is what you typed
        console.log(request.term); 

        //call response with an array containing the filtered data
        response([...]); 
    }
});

解决您问题的简单方法:

function lightwell(request, response) {
    function hasMatch(s) {
        return s.toLowerCase().indexOf(request.term.toLowerCase())!==-1;
    }
    var i, l, obj, matches = [];

    if (request.term==="") {
        response([]);
        return;
    }

    for  (i = 0, l = projects.length; i<l; i++) {
        obj = projects[i];
        if (hasMatch(obj.label) || hasMatch(obj.desc)) {
            matches.push(obj);
        }
    }
    response(matches);
}

$( "#project").autocomplete({
    source: lightwell
});

还有一个小提琴http://jsfiddle.net/FUZPN/5/