- 按网上的教程
- https://blog.csdn.net/cjnba/article/details/120939084
- 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