layui下拉框输入关键字才出数据
html里这样放
<div class="layui-form-item"><label class="layui-form-label">合同方：</label><div class="layui-input-block rightinline"><input type="text" name="select_text" id='select_text' placeholder="请输入搜索内容" autocomplete="off" class="layui-input"><div class="layui-unselect layui-form-select"><dl class="layui-anim layui-anim-upbit" id="inputSelect" style="top: 0px;"><dd mark="tips" name="dd" id="tips" onclick="ddClick(this)" class="layui-select-tips">请输入</dd></dl></div></div></div>js里这样写
<script>$.ajax({url: '/ConChanMark/Gethtflist',type: 'post',success: (res) => {let selects = `<dd mark="tips" name="dd" id="tips" class="layui-select-tips" onclick="ddClick(this)" value="">请输入合同方</dd>`;res.data.map(item => {selects += `<dd mark="value" name="dd" onclick="ddClick(this)" class="" value="${item.value}">${item.text}</dd>`;})selects += `<p class="layui-select-none" style="display:none;">无匹配项</p>`;$('#inputSelect').html(selects);$('#inputSelect dd').hide();$('#tips').show();}});var select_id = "";/* 输入框 输入事件 */$(document).on('input', '#select_text', function(){ddShow();select_id = '';/* 每次输入都置空id */});function ddShow(){var selectVal = $('#select_text').val();var dds = $('#inputSelect dd');if (selectVal) {/* 输入框有值 */let arr = [];for (var i = 0; i < dds.length; i++) {if (dds[i].getAttribute('id')!=='tips' && dds[i].innerHTML.indexOf(selectVal) > -1) {/* 列表中匹配上输入框的值 */dds[i].style.display = "block";arr.push(true);if(select_id && dds[i].getAttribute('value')===select_id){dds[i].className = "layui-this";}else{dds[i].className = '';}} else {dds[i].style.display = "none";arr.push(false);}}$('#tips').hide();if (arr.every(i => !i)) {/* 列表没有一条匹配上输入框的值，就显示无匹配值 */$('#inputSelect p').show();} else {$('#inputSelect p').hide();}} else {$('#inputSelect dd').hide();$('#tips').show();$('#inputSelect p').hide();}}/* 输入框 点击事件 */$(document).on('click', '#select_text', function () {if ($("#inputSelect").css('display') == 'block') {$("#inputSelect").hide();$(this).blur();if(!select_id){$('#select_text').val('');}} else {$("#inputSelect").fadeIn("slow");$(this).focus();ddShow();}});/* 点击其它地方关闭列表 */$('body').click(function (e) {if ($(e.target).parent().attr('id') != 'inputSelect' && $(e.target).attr('id') != 'select_text') {$("#inputSelect").hide();if (!select_id) {$('#select_text').val('');}}});/* 列表中的一条 点击事件 */function ddClick(dd) {$("#inputSelect").hide();var mark = dd.getAttribute("mark");var dds = $('#inputSelect dd');for (var i = 0; i < dds.length; i++) {if (dd !== dds[i]) {dds[i].className = "";}}document.getElementById("tips").className = "layui-select-tips";if ("tips" === mark) {$('#select_text').val('');select_id = '';dd.className = "layui-select-tips";} else if ("value" === mark) {$('#select_text').val(dd.innerHTML);select_id = dd.getAttribute('value');dd.className = "layui-this";}}</script>Gethtflist 这个方法这样写，这是后台动态取值，自行调整。
[HttpPost]public JsonResult Gethtflist(string? keyword){var DB = SqlSugarHelper.DB.CopyNew();List<SelectListItem> item1 = new List<SelectListItem>();var pageQuery = DB.Queryable<ContractInfo>().WhereIF(!string.IsNullOrEmpty(keyword),L => L.ConCorpName.Contains(keyword)).ToList();foreach (var sc in pageQuery){//item1.Add(new SelectListItem { Text = sc.ConCorpName + "-" + sc.ChanID, Value = sc.ConID + "" });item1.Add(new SelectListItem { Text = sc.ConCorpName , Value = sc.ConID + "" });}var result = item1.OrderBy(m => m.Text).Select(m => new { m.Text, m.Value }).Distinct().ToList().Select(x => new SelectListItem(){Text = x.Text,Value = x.Value});return Json(new { data = result });}ok效果图
关于这个下拉框的取值与赋值
取值
文本内容
$("#select_text").val();这条数据的value值也就是id值
select_id具体应用场景，这是一个添加方法，更容易理解
//添加方法
$.ajax({type: "POST",data: {htf: select_id,htfname:$("#select_text").val()},url: "/你的控制器/你的添加方法",success: function (result) {if (result.success) {table.reload('ID-table-demo-data');layer.close(index);}else {layer.alert(result.message);}}
})修改时回显赋值
写在你回显逻辑里，这样赋值即可
select_id = obj.data.conid;$("#select_text").val(obj.data.conname);