SimpleCore

Simple AutoComplete Demo

简单示例

复杂示例一(淘宝搜索提示)

在这个示例中演示了怎么自定义自动完成的数据源与格式化数据的函数

复杂示例二(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");
});

SimpleUI示例中心

Simple AutoComplete Demo

简单示例

复杂示例一(淘宝搜索提示)

复杂示例二(Combo box)