Jquery UI自动完成:从一个数组的多个属性中搜索
嗨,我正在尝试让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" }, ... ]
label属性显示在建议菜单中。 当用户选择项目时,该值将插入到input元素中。 如果只指定了一个属性,则它将用于两者,例如,如果仅提供值属性,则该值也将用作标签 。
我如何(硬)编码它所以源使用2个标签 ( label
和desc
?)而不是一个标签 ?
(对不起,我已经搜索了很多类似的问题,但是它们都针对多个来源,因为我只有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
还有一个小提琴http://jsfiddle.net/FUZPN/5/