layui模拟下拉框从数据库中模糊查询数据

项目场景:

layui的下拉框只能模糊查询出已经加载的数据,当然用ajax 请求也能查询到,但是数据多了加载会很慢,而且layui的框放在android调试器上每个机型都不能保证完全适配

问题描述:

自己拼接了个下拉框,并且实时获取输入框的值,确定了再将div中值清空

		$("#input_div").on('click', 'p', function(event) {
		              //  var txt = "这是第"+($(this).index()+1)+"个li标签";
		                //alert($(this).text());
		//这样赋值便于取值(否则该字段为空)
		//document.getElementById("qymc").value= row.paramName;
		//$("#gmfmc").textbox("setValue",$(this).text());
		$("#gmfmc").attr("value",$(this).text());
		$("#gmfmc").val($(this).text());
		var gmfmc = $(this).text();
		/* $.ajax({
		    type : "POST",
		    url : "/form/jsp/getBuyerInfoByName",
		    data : {
		        gmfmc : gmfmc
		    },
		    success : function(MapString) {
		        console.log(MapString);
		        $("#gmfnsrsbh").attr('value',MapString.gmfnsrsbh);
		        $("#gfdz").attr('value',MapString.gmfdz);
		        $("#gfdh").attr('value',MapString.gmfgddh);
		        $("#gmfyhzh").attr('value',MapString.gmfyhzh);
		    }
		}); */
		$('#input_div').hide();
		            });
 $("input:text").bind("input propertychange",function(){
	
				 $('#input_div').show();
				 $('#input_div').html('');
				   layer.msg($(this).val());//打印输入框字符长度
				 
					$.getJSON("xiala.json", "$(this).val()", function(data) {
				   	 //$('#input_div').append("<p style='width: 100%;' > " +JSON.stringify(data)+ "</p>");
					       //each循环 使用$.each方法遍历返回的数据date
						//layer.alert(JSON.stringify(data.length))
					       /* $.each(data.first, function(i, item) {
					            var str = '<div>姓名:' + item.name + '性别:' + item.sex + '</div>';+
					            document.write(str);
					       }) */
						   
						 //   var guideType = $("#hidGuideType").val().split(',');
						      for (var i = 0; i < data.length; i++){
						           $('#input_div').append("<p >" +JSON.stringify(data[i].nsrmc)+ "</p>");
						       }  
						          // layui.form.render('select');   
								  // $('#input_div').CSS("clientHeight","this.clientHeight");
					});
				  	
				  
				 });

html:

	<div class="layui-form-item">
				<label class="layui-form-label"><i style="color: red;margin-right: 3px">*</i>购方名称</label>
				<div class="layui-input-block" >
					<!-- <input class="layui-input" style="width: 100%;height: 46px;" type="text" id="gmfmc" name="gmfmc" data-options="prompt:'请输入购方名称'" autocomplete="off"> -->
				<input type="text" class="layui-input" placeholder="请输入单位名称"
				                       name="gmfmc" id="gmfmc" onpropertychange="onPropertyChange(event)">
					<div class="input_div" id="input_div" style="display: none;">
					</div>
				</div>
			</div>

要实现从数据库动态获取下拉框的选项,我们需要使用 layui 的 form 模块,以及 Ajax 技术从后台获取数据。以下是一个简单的示例: HTML 代码: ```html <div class="layui-form-item"> <label class="layui-form-label">城市</label> <div class="layui-input-inline"> <select id="city" lay-filter="city"> <option value="">请选择城市</option> </select> </div> </div> ``` JavaScript 代码: ```javascript layui.use(['form', 'jquery'], function() { var form = layui.form; var $ = layui.jquery; // 从后台获取下拉框选项数据 $.get('/getCityList', function(res) { if (res.code === 0) { var cityList = res.data; var html = ''; cityList.forEach(function(city) { html += '<option value="' + city.id + '">' + city.name + '</option>'; }); $('#city').html(html); form.render('select'); } else { layer.msg(res.msg, {icon: 2, time: 1500}); } }); }); ``` 在上述代码,我们使用了 jQuery 的 Ajax 方法从后台获取城市列表数据,然后遍历数据生成下拉框选项的 HTML 代码,并通过 $('#city').html(html) 方法将其添加到下拉框。最后,调用 form.render('select') 方法重新渲染下拉框即可。 需要注意的是,在后台接口,需要返回一个 JSON 格式的数据,其 code 表示接口调用状态,0 表示成功,1 表示失败;msg 表示接口调用结果提示信息;data 表示接口返回的数据。例如: ```json { "code": 0, "msg": "获取城市列表成功", "data": [ {"id": 1, "name": "北京"}, {"id": 2, "name": "上海"}, {"id": 3, "name": "广州"}, {"id": 4, "name": "深圳"}, {"id": 5, "name": "杭州"}, {"id": 6, "name": "成都"}, {"id": 7, "name": "武汉"} ] } ``` 其数据可以根据实际需求进行修改。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值