YUI 3 auto complete 提供了两种使用方式：插件（plug） 和实例化
1.插件方式
HTML部分：
<div class="yui3-skin-sam">
<input id="ac-input">
</div>
JS部分：
YUI().use("autocomplete", function (Y) {
var inputNode = Y.one('#ac-input'),
tags = [
'css',
'html',
'js',
'yui'
];
inputNode.plug(Y.Plugin.AutoComplete, {
source: tags,
resultHighlighter: 'startsWith',
});
inputNode.on('focus', function () {
inputNode.ac.sendRequest('');
});
});
这里使用的数据源tags，就是一个简单的数组，实际应用可能使用的是远程数据库的结果。
给输入框节点安装上AutoComplete 插件后，inputNode 会自动生成一个 ac 对象，通过inputNode.ac.on(EventName,fn)来监听事件和绑定回调函数
若果希望，键盘导航，inputNode 中的值会跟着变化
inputNode.ac.on("activeItemChange",function(e){
if(e.newVal){
this.set("value",e.newVal.get("text"),{src:"user"});
//console.log("active change");
}
});
需要注意的是，this.set("value",e.newVal.get("text"),{src:"user"});
第三个参数是一个对象，src，表示这种改变是来自何处，Autocomplete 会区别处理来自用户的输入和非用户的输入，这里官方的API没有作说明，折腾了好长时间！的确YUI好是好，可是它的文档会让一般耐心的人会崩溃掉
YUI().use("autocomplete", function (Y) {
var inputNode = Y.one('#ac-input'),
tags = [
'css',
'html',
'js',
'yui'
];
inputNode.plug(Y.Plugin.AutoComplete, {
source: tags,
resultHighlighter: 'startsWith',
});
// list of tag suggestions.
inputNode.on('focus', function () {
inputNode.ac.sendRequest('');
});
inputNode.ac.on("activeItemChange",function(e){
if(e.newVal){
this.set("value",e.newVal.get("text"),{src:"user"});
//console.log("active change");
}
});
});
如果还要支持鼠标hover时，将hover的项放入inputNode
inputNode.ac.on("hoveredItemChange",function(e){
if(e.newVal)
this.set("activeItem",e.newVal);
})
数据源是通过ajax获得的，需要添加 "datasource-io","datasource-jsonschema"这些包
var ds = new Y.DataSource.IO({
source : "/search.html"
}),
listTemplate ='<div><span class="suggest">{sug}</span><span class="description">{des}</span></div>';
ds.plug({fn : Y.Plugin.DataSourceJSONSchema, cfg : {
schema : {
resultListLocator : "results",
resultFields: [{key:"sug"},{key:"des"}]
}
}});
将上面的 source:tags 换成source：ds
search.html 返回的数据格式：{"results":[{"sug":"sug1","des":"des1"},{"sug":"sug2","des":"des2"}]} ，与schema中描述相对应
另外，一种使用autocomplete 的方式就是作为一个类进行实例化，可以查看官方的文档 http://yuilibrary.com/yui/docs/autocomplete/#as-a-class
浙公网安备 33010602011771号