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);