weui select功能添加搜索功能问题

  1. 按网上的教程
    1. https://blog.csdn.net/cjnba/article/details/120939084
    2. https://jqweui.edik.cn/extends#select

可能实现, 问题是搜索完成后 , 不会更新input框的值

2. 注意的修改的几个地方,我来指出来

  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("<div class='weui-picker-modal weui-select-modal'>" + config.toolbarTemplate + (config.multi ? config.checkboxTemplate : config.radioTemplate) + "</div>");
	this.tpl = $.t7.compile("<div app_gn='select' style='min-height:300px !important;' class='weui-picker-modal weui-select-modal'>" + config.toolbarTemplate + (config.search ? config.searchTemplate : "") + (config.multi ? config.checkboxTemplate : config.radioTemplate) + "</div>");
        
    if(config.input !== undefined) this.$input.val(config.input);

    this.parseInitValue();

    this._init = true;
  }

加粗的一段

  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变量上面加如下:
    searchTemplate: '<div class="weui-search-bar">\
            <form class="weui-search-bar__form">\
            <div class="weui-search-bar__box">\
            <i class="weui-icon-search"></i>\
            <input type="search" class="weui-search-bar__input" id="select_search_input" placeholder="搜索" required="">\
            <a href="javascript:" class="weui-icon-clear" id="select_search_clear"></a>\
            </div>\
            <label class="weui-search-bar__label">\
            <i class="weui-icon-search"></i>\
            <span>搜索</span>\
            </label>\
            </form>\
            <a href="javascript:" class="weui-search-bar__cancel-btn" id="select_search_cancel">取消</a>\
            </div>',

searchTemplate 这个变量对应的代码

    toolbarTemplate: '<div class="toolbar">\
      <div class="toolbar-inner">\
      <a href="javascript:;" class="picker-button close-select">{{closeText}}</a>\
      <h1 class="title">{{title}}</h1>\
      </div>\
      </div>',
    searchTemplate: '<div class="weui-search-bar">\
            <form class="weui-search-bar__form">\
            <div class="weui-search-bar__box">\
            <i class="weui-icon-search"></i>\
            <input type="search" class="weui-search-bar__input" id="select_search_input" placeholder="搜索" required="">\
            <a href="javascript:" class="weui-icon-clear" id="select_search_clear"></a>\
            </div>\
            <label class="weui-search-bar__label">\
            <i class="weui-icon-search"></i>\
            <span>搜索</span>\
            </label>\
            </form>\
            <a href="javascript:" class="weui-search-bar__cancel-btn" id="select_search_cancel">取消</a>\
            </div>',
    radioTemplate:
      '<div app_gn="cells" class="weui-cells weui-cells_radio">\
        {{#items}}\
        <label app_gn="cell" class="weui-cell weui-check_label" for="weui-select-id-{{this.title}}">\
          <div class="weui-cell__bd weui-cell_primary">\
            <p>{{this.title}}</p>\
          </div>\
          <div class="weui-cell__ft">\
            <input type="radio" class="weui-check" name="weui-select" id="weui-select-id-{{this.title}}" value="{{this.value}}" {{#if this.checked}}checked="checked"{{/if}} data-title="{{this.title}}">\
            <span class="weui-icon-checked"></span>\
          </div>\
        </label>\
        {{/items}}\
      </div>',
    checkboxTemplate:
      '<div app_gn="cells" class="weui-cells weui-cells_checkbox">\
        {{#items}}\
        <label app_gn="cell" class="weui-cell weui-check_label" for="weui-select-id-{{this.title}}">\
          <div class="weui-cell__bd weui-cell_primary">\
            <p>{{this.title}}</p>\
          </div>\
          <div class="weui-cell__ft">\
            <input type="checkbox" class="weui-check" name="weui-select" id="weui-select-id-{{this.title}}" value="{{this.value}}" {{#if this.checked}}checked="checked"{{/if}} data-title="{{this.title}}" >\
            <span class="weui-icon-checked"></span>\
          </div>\
        </label>\
        {{/items}}\
      </div>',

注意模板中的添加了一些标签属性。加粗。

  Select.prototype._bind = function(dialog) {
    var self = this,
        config = this.config;
    dialog.on("change", function(e) {
      var checked = dialog.find("input:checked");
      var values = checked.map(function() {
        return $(this).val();
      });
      var titles = checked.map(function() {
        return $(this).data("title");
      });
      
      self.updateInputValue(values, titles);	
	  console.log(config.multi,':eagle');
	
      if(config.autoClose && !config.multi){ 
	      // eagle这里不延迟的话会造成搜索功能选中失效
          setTimeout(function () { self.close(); }, 100); 
      }
    })
    .on("click", ".close-select", function() {
      self.close();
    });
  }

上面这段里面我加了一个延迟, 否侧会出现, 查找后, 再点击选中的行时,不能更新到input框里面的值。 其它方法我也不会, 有更好方法的人可以来补冲。原因就是在搜索完后再点击选中会关了没有 radio隐掉的input框没有触发。

模板使用例:

<div class="weui-cell weui-cell_select weui-cell_select-after">
    <div class="weui-cell__hd">
       <label class="weui-label">施工位置</label>
    </div>
    <div class="weui-cell__bd">
      <input class="weui-input search_test" name="shigongweizhi"  type="text" value="" >
    </div>
</div>

javasript部份:

// 给 搜索框添加输监听事件 这里照抄不用动
$(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();
    //console.log('search_val:' + search_val);
    var cells = $(_body).find("label[app_gn='cell']");
    //console.log('cells:' + cells.length);
    for (var i = 0, len = cells.length; i < len; i++) {
        var text = $(cells[i]).text().trim();
        if (text.indexOf(search_val) > -1) {
            $(cells[i]).css("display", "");
        } else {
            $(cells[i]).css("display", "none");
        }
    }
}
$(".search_test").select({
  title: "请选择",
  autoClose: true, 
  search: true,//搜索,默认 不开启
  items: ["法官", "医生", "猎人", "学生", "记者", "其他","22法官222", "33猎人1",  "学生1", "44记者1", "其他1" ],
  onChange: function (d) {
	 console.log("selected:",d);
	//vm.CurrentUserId = d.values;
	//vm.CurrentUserName = d.titles;
	
	//$.toptip('this is select');
  },
  beforeClose:function(d){
	  console.log("beforeClose:",d);
  }
});
 
//这个是关联前台列新, 动态更新下拉列表内容的, 参考
$("select[name='yewufenlei']").change(function(){
	console.log($(this).val());
	$.toptip('请输入进度信息');
	$(".search_test").select("update", { items: ["法官1", "猎人1",  "学生1", "记者1", "其他1" ] })
});

技术能力有限, 分享出来参考, 转载请注明小站地址,原创文章,www.iooe.cn