JQuery WEUI Select 组件增加搜索栏

1.Demo

  

2.修改源码

/* global $:true */
+ function($) {
  "use strict";

  var defaults;

  var selects = [];

  var Select = function(input, config) {

    var self = this;
    this.config = config;

    //init empty data
    this.data = {
      values: '',
      titles: '',
      origins: [],
      length: 0
    };
  
    this.$input = $(input);
    if(config.readOnly != false ){
    	this.$input.prop("readOnly", true);
    }
    this.initConfig();

    config = this.config;

    this.$input.click($.proxy(this.open, this));
    selects.push(this)
  }

  Select.prototype.initConfig = function() {
    this.config = $.extend({}, defaults, this.config);

    var config = this.config;

    if(!config.items || !config.items.length) return;
    
    config.items = config.items.map(function(d, i) {
      if(typeof d == typeof "a") {
        return {
          title: d,
          value: d
        };
      }

      return d;
    });
		
    this.tpl = $.t7.compile("
" + config.toolbarTemplate + (config.search?config.searchTemplate:"") + (config.multi ? config.checkboxTemplate : config.radioTemplate) + "
");

    if(config.input !== undefined) this.$input.val(config.input);

    this.parseInitValue();

    this._init = true;
  }

  Select.prototype.updateInputValue = function(values, titles) {
    var v, t;
    if(this.config.multi) {
      v = values.join(this.config.split);
      t = titles.join(this.config.split);
    } else {
      v = values[0];
      t = titles[0];
    }
		
    //caculate origin data
    var origins = [];

    this.config.items.forEach(function(d) {
      values.each(function(i, dd) {
        if(d.value == dd) origins.push(d);
      });
    });

    this.$input.val(t).data("values", v);
    this.$input.attr("value", t).attr("data-values", v);

    var data = {
      values: v,
      titles: t,
      valuesArray: values,
      titlesArray: titles,
      origins: origins,
      length: origins.length
    };
    this.data = data;
    this.$input.trigger("change", data);
    this.config.onChange && this.config.onChange.call(this, data);
  }

  Select.prototype.parseInitValue = function() {
    var value = this.$input.val();
    var items = this.config.items;

    //如果input为空，只有在第一次初始化的时候才保留默认选择。因为后来就是用户自己取消了全部选择，不能再为他选中默认值。
    if( !this._init && (value === undefined || value == null || value === "")) return;

    var titles = this.config.multi ? value.split(this.config.split) : [value];
    for(var i=0;i this.config.max) {
          $.toast("最多只能选择"+this.config.max+"个", "text");
          return false
        }
      }
    }
    $.closePicker(function() {
      self.onClose();
      callback && callback();
    });

    return true
  }

  Select.prototype.onClose = function() {
    this._open = false;
    if(this.config.onClose) this.config.onClose(this);
  }

  Select.prototype.getHTML = function(callback) {
    var config = this.config;
    return this.tpl({
      items: config.items,
      title: config.title,
      closeText: config.closeText
    })
  }


  $.fn.select = function(params, args) {

    return this.each(function() {
      var $this = $(this);
      if(!$this.data("weui-select")) $this.data("weui-select", new Select(this, params));

      var select = $this.data("weui-select");

      if(typeof params === typeof "a") select[params].call(select, args);

      return select;
    });
  }

  defaults = $.fn.select.prototype.defaults = {
    items: [],
    input: undefined, //输入框的初始值
    title: "请选择",
    multi: false,
    closeText: "确定",
    autoClose: true, //是否选择完成后自动关闭，只有单选模式下才有效
    onChange: undefined, //function
    beforeClose: undefined, // function 关闭之前，如果返回false则阻止关闭
    onClose: undefined, //function
    onOpen: undefined, //function
    split: ",",  //多选模式下的分隔符
    min: undefined, //多选模式下可用，最少选择数
    max: undefined, //单选模式下可用，最多选择数
    search: false,	// 搜索，默认 不开启
    readOnly:true,	// 只读
    // 标题
    toolbarTemplate: '
\
      
\
      {{closeText}}\
      
{{title}}
\
      
\
      
',
    searchTemplate: '
\
  			
\
    		
\
      		\
      		\
      		\
    		
\
    		\
      		\
      		搜索\
    		\
  			
\
  			取消\
			
',
    radioTemplate:
      '
\
        {{#items}}\
        \
          
\
            
{{this.title}}
\
          
\
          
\
            \
            \
          
\
        \
        {{/items}}\
      
',
    checkboxTemplate:
      '
\
        {{#items}}\
        \
          
\
            
{{this.title}}
\
          
\
          
\
            \
            \
          
\
        \
        {{/items}}\
      
',
  }

}($);

// 给 搜索框添加输监听事件
$(document).on('input',"#select_search_input", function(){
						select_search_weui(this) ;
			 		}).on('click','#select_search_clear,#select_search_cancel',function(){
			 			select_search_weui(this) ;
			 		}) ;
			 
function select_search_weui(obj){
		var body = $(obj).closest("div[app_gn='select']") ; 
		var search_val = $(obj).val().trim() ;
		var cells = $(body).find("label[app_gn='cell']") ;
		for(var i=0,len=cells.length;i -1 ){
				$(cells[i]).css("display","") ;
			}else{
				$(cells[i]).css("display","none") ;
			}
		}
}

转载于:https://www.cnblogs.com/ChangFen/p/8561916.html