jQuery UI自动完成功能:从一个数组的多个属性中搜索 [英] Jquery UI Autocomplete: search from multiple attributes of one array
问题描述
我正在尝试使jQuery UI自动完成小部件能够正常工作，以便它从我数组的多个属性中搜索匹配项(默认情况下不仅仅是一个属性).
Hi I'm trying to get the jQuery UI autocomplete widget to work so that it searches for matches from multiple attributes of my array (not just one that it does by default).
我已经弄乱了他们的例子，但是我仍然不确定如何解决这个问题.
I've messed around with their example, however I'm still unsure how to solve this.
这是我在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"，则应弹出的前两个元素.
What I'm seeking is that if you type "write", the first element should pop up in autocomplete, similarly if you type "jq" the first 2 elements should pop up.
根据文档:
Array:数组可用于本地数据.支持两种格式:
Array: An array can be used for local data. There are two supported formats:
-
字符串数组:
[ "Choice1", "Choice2" ]
具有标签和值属性的对象数组:[ { label: "Choice1", value: "value1" }, ... ]
An array of objects with label and value properties: [ { label: "Choice1", value: "value1" }, ... ]
标签属性显示在建议菜单中.用户选择项目时，值将插入到输入元素中.如果仅指定一个属性，则将同时使用这两个属性，例如，如果仅提供 value 属性，则 value 也将用作标签.
The label property is displayed in the suggestion menu. The value will be inserted into the input element when a user selects an item. If just one property is specified, it will be used for both, e.g., if you provide only value properties, the value will also be used as the label.
我如何(硬)编码它，以便源使用 2个标签(label和desc?)而不是一个标签?
How do I (hard)code it so the source uses 2 labels (label and desc?) instead of the one label?
(对不起，我已经搜索了许多类似的问题，但是它们都针对多个来源，因为我只有1个数组，所以不在这里.)
推荐答案
自动完成功能接受第三类来源，该函数可以按您认为合适的任何方式提供数据:
Autocomplete accepts a third type of source, a function, that can provide data any way you see fit:
第三个变体，即回调，提供了最大的灵活性，并且可以 用于将任何数据源连接到自动完成".回调获取 两个参数:
The third variation, a callback, provides the most flexibility and can be used to connect any data source to Autocomplete. The callback gets two arguments:
- 具有单个term属性的请求对象，它引用文本输入中当前的值.例如，如果用户输入 在城市字段中为"new yo"，自动填充"字词将等于"new yo".
- 响应回调，它需要一个参数:向用户建议的数据.该数据应根据 提供的术语，并且可以采用上述任何格式 简单的本地数据.提供自定义来源时很重要 回调以处理请求期间的错误.您必须始终致电 响应回调，即使遇到错误也是如此.这样可以确保 小部件始终具有正确的状态.
- A request object, with a single term property, which refers to the value currently in the text input. For example, if the user enters "new yo" in a city field, the Autocomplete term will equal "new yo".
- A response callback, which expects a single argument: the data to suggest to the user. This data should be filtered based on the provided term, and can be in any of the formats described above for simple local data. It's important when providing a custom source callback to handle errors during the request. You must always call the response callback even if you encounter an error. This ensures that the widget always has the correct state.
这意味着您可以编写如下内容
This means that you can write something like this
$( "#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([...]);
}
});
您的问题的简单解决方案:
A simple solution to your problem:
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/
这篇关于jQuery UI自动完成功能:从一个数组的多个属性中搜索的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
