【layui】扩展组件xm-select 下拉框带搜索功能 异步请求接口 ajax加载数据 ②

根据地址来回填数据，如果地址栏有参数，那么下拉查询需要回填对应的数据

1、地址栏
admin/pages/storemanage/scangetbook/scangetbook.html?userid=19&nickname=Undefine

2、有地址参数为图一，无地址参数为图二，根据userid来回填值

---

需求：根据地址栏参数来判断下拉数据的回填，当点击查询时，如果下拉框有值就直接走第二步，如果下拉框没有值则提示【请先选择用户】

用到的是layui的第三方插件，xm-select

xm-select的基础代码如下：

xmSelect.render({
	el: '#finduser',
	filterable: true,  ——→ 开启搜索
	remoteSearch: true, ——→ 开启远程搜索
	radio: true, ——→ 单选
	theme: {color: '#1875F0'}, ——→ 颜色
	tips: '请输入手机号或昵称', ——→ 自定义提示
	searchTips: '请输入手机号或昵称', ——→ 自定义搜索提示
	on: function(data) {  } ——→ 监听选择
	remoteMethod: function(val, cb) {  ——→ 远程方法
		
		api_scangetbook.findUser({
			keyword: val
		}).then(function(res) {
			if (res.code == 0) {
				if (val == '') {
					keyworddata = res.data;
				}
				var obj = [];
				res.data.forEach(function(v, i) {
					obj.push({
						name: v.nickname,
						value: v.user_id
					});
				})
				cb(obj);
			} else {
				layer.msg(common.msg(res.msg), {
					time: 2000,
					icon: 5
				});
			}
		})
			
 	},
	hide: function() {  } ——→ 收起下拉时执行的事件（这里我用来重置搜索）
	
})

扩展版：

on监听变化

当data.arr有值（回填了）则地址栏有参数，就将【可用书籍数】这一栏显示，反之。 userMaxCapacitys(arr[0]['value']);$('.capacitybox').show(); 同时获取选中的值，有值就执行第二步，没有值就提示先选人。

当data.isAdd为false，则表示没有选中值，则将【可用书籍数】这一栏隐藏，反之。
并且通过 getvalue来给 isValue来赋值，根据isValue来判断是否提示【提示先选人】

hide监听

当没有用hide()时进行关键字查询会导致下次在进来时总数据就是上次查询的数据结果，所以这里用了hide来监听

先获取选中的数据，将keyword传参值设为空 ，即可获取全部的数据，在将新的数据更新一遍，再将获取的值setValue赋值上去即可解决问题。

var finduser = '';
findusers();

function findusers() {
	finduser = xmSelect.render({
		el: '#finduser',
		filterable: true,
		remoteSearch: true,
		radio: true,
		theme: {color: '#1875F0'},
		tips: '请输入手机号或昵称',
		searchTips: '请输入手机号或昵称',
		on: function(data) {
			var arr = data.arr;
			var isAdd = data.isAdd;//监听删除变化
			if (arr.length > 0) {
				userMaxCapacitys(arr[0]['value']);
				$('.capacitybox').show();
				
				getvalue = arr[0]['value'];//判断是否有值，没有值提示先选人
			}
			
			if(isAdd == false){
				$('.capacitybox').hide();
				$('.capacitybox span').html('');
				getvalue = '';
			}
			
			if(getvalue != ''){
				isValue = true;
			}else{
				isValue = false;
			}
		},
		remoteMethod: function(val, cb) {
			//接口数据
			api_scangetbook.findUser({
				keyword: val
			}).then(function(res) {
				if (res.code == 0) {
					if (val == '') {
						keyworddata = res.data;
					}
					var obj = [];
					res.data.forEach(function(v, i) {
						obj.push({
							name: v.nickname,
							value: v.user_id
						});
					})
					cb(obj);
				} else {
					layer.msg(common.msg(res.msg), {
						time: 2000,
						icon: 5
					});
				}
			})
		},
		hide: function() {
			hidetags(finduser);
		}
	})
}

function hidetags(selector) {
	var tagVal = selector.getValue();  ——→ 获取选中的值
	api_scangetbook.findUser({
		keyword: ''
	}).then(function(res) {
		if (res.code == 0) {
			var obj = [];
			res.data.forEach(function(v, i) {
				obj.push({
					name: v.nickname,
					value: v.user_id
				});
			})
			selector.update({ ——→ 更新新数据
				data: obj
			})
			selector.setValue(tagVal); ——→ 赋值数据
		} else {
			layer.msg(common.msg(res.msg), {
				time: 2000,
				icon: 5
			});
		}
	});
}