Jquery UI自动完成：从一个数组的多个属性中搜索-Java 学习之路

嗨，我正在尝试让jQuery UI自动完成小部件工作，以便它从我的数组的 multiple 属性中搜索匹配项（不仅仅是它默认执行的一项） .

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

这是 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”，前两个元素应该弹出 .

根据documentation：

数组：数组可用于本地数据 . 有两种支持的格式：字符串数组：[“Choice1”，“Choice2”]具有标签和值属性的对象数组：[{label：“Choice1”，value：“value1”}，...] label属性显示在建议菜单中 . 当用户选择项目时，该值将插入到input元素中 . 如果只指定了一个属性，则它将用于两者，例如，如果仅提供值属性，则该值也将用作标签 .

我如何（硬）编码它所以源使用 2 labels （ label 和 desc ？）而不是 label ？

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

1 回答

11
Autocomplete接受一个third type of source，一个可以以您认为合适的方式提供数据的函数：

第三种变体，一种回调，提供了最大的灵活性，可用于将任何数据源连接到自动完成 . 回调有两个参数：一个请求对象，带有一个term属性，它引用当前文本输入中的值 . 例如，如果用户在城市字段中输入“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/
回复于 2024-04-25T08:59:46+08:00

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

1 回答

相关问题