#

## 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, "<b class='orange'>" + value + "</b>"), li=$("<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

Simple.declare("Combobox", null, { node: null, init: function(){ if (this.node) { var self = this, data = []; this.node = $(this.node); this.renderNode = $("<input type='text'/>").addClass("simple-combobox-input"); this.activeBtn = $("<a>").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"); });