文档
示例
下载
部署
关于
SimpleUI示例中心
Simple AutoComplete Demo
简单示例
$("#testInput").autocomplete({ source:["javascript","java","subsvn","actionscript","jdk","json","ruby","python","css","html","etc"] })
复杂示例一(淘宝搜索提示)
在这个示例中演示了怎么自定义自动完成的数据源与格式化数据的函数
$("#taobao").autocomplete({ source: function(val, parse){ $.ajax({ url:"http://suggest.taobao.com/sug?code=utf-8&callback=?", data:{ q:val }, dataType:"jsonp", success:function(r){ parse(r); } }); }, format:function(value,item){ var itemText=item[0].replace(value, "
" + value + "
"), li=$("
").html(itemText).data("value",item[0]); return li; }, isResult:function(data){ return data.result.length; }, dealData:function(data){ return data.result; }, onselect:function(val){ Simple.log(val); } })
复杂示例二(Combo box)
在这个示例中演示了通过自动完成将select转换成Combo box
javascript
java
ruby
json
jukoes
options
点击转换
点击销毁
Simple.declare("Combobox", null, { node: null, init: function(){ if (this.node) { var self = this, data = []; this.node = $(this.node); this.renderNode = $("
").addClass("simple-combobox-input"); this.activeBtn = $("
").addClass("simple-combobox-active").text("激活"); self.node.find("option").each(function(){ var val = $(this).val(), text = $(this).text(); data.push({ label: text, value: val }); }); this.allData = data; this.autoObj = this.renderNode.autocomplete({ source: function(value, callback){ data = self.autoObj.data("widget_autocomplete").filterData(self.allData, value); callback(data); }, onselect: function(val){ self.node.val(val); } }); this.activeBtn.click(function(){ self.autoObj.data("widget_autocomplete").parseData(self.allData); }); this.node.after(this.renderNode); this.renderNode.after(this.activeBtn); this.node.hide(); } }, destroy: function(){ this.node.show(); this.renderNode.remove(); this.activeBtn.remove(); } }); Simple.bridgeTojQuery("combobox", Simple.Combobox); $("#change").click(function(){ $("#comboSelect").combobox(); }); $("#destroy").click(function(){ $("#comboSelect").combobox("destroy"); });