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

最新推荐文章于 2023-02-28 10:57:24 发布

原创最新推荐文章于 2023-02-28 10:57:24 发布

· 1.3k 阅读

2 ·

版权

文章标签：

#javascript #jquery #html #layui

本文介绍了一种使用自定义下拉框进行模糊查询的方法，通过实时获取输入框的值并展示匹配项，解决了layui下拉框存在的问题。此外，还提供了一个具体的实现示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目场景：

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>