熟悉layui框架的同学一定使用过下拉搜索框，增加一个search属性，就可以支持搜索，但是当手动输入搜索没有时，手动搜索的内容会消失，需要解决的是这个方便，这里我是用原生JS解决的，所以适用在各个框架中,而且我的只能搜索框还是在动态表格中实现的，不能用tr，td标签，适用了input+div实现
废话不多说，先让代码
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"></head><style>.search{border: 1px solid transparent;width: 400px;height: 80px;margin: 0 auto;}.search input{border: 1px solid gray;width: 200px;height: 80px;}.content{width: 200px;/* height: 80px; */border: 1px solid red;overflow-y: auto;max-height: 60px;}.content p {height: 20px;}</style><body οnlοad="onload()"><div class="search"><input id="input" type="text" placeholder="请输入" οnfοcus="showDiv()" οninput="filterP()"><div id="dataList" class="content" οnclick="pushInput()" style="display:none;"><option value="白菜">白菜</option><option value="金针菇">金针菇</option><option value="红尖椒">红尖椒</option><option value="黄彩椒">黄彩椒</option><option value="西芹">西芹</option><option value="大葱">大葱</option><option value="香葱">香葱</option><option value="香菜">香菜</option></div></div><script>var dataArr = [];var dataList = document.getElementById('dataList');function onload() {//初始化dataArr的数据var childs = dataList.children; //在IE下注释也算节点,不能用于for (var i = 0; i < childs.length; i++) {dataArr.push(childs[i].innerText);}console.log(dataArr);}function showDiv() {dataList.style.display = "";}function filterP() {var e = event.target || event.srcElement;var str = e.value;console.log(str);dataList.innerHTML = ''; //清空div下的所有P元素dataArr.forEach(function (item) {if (item.indexOf(str) != -1) {var p = document.createElement('p');var text = document.createTextNode(item);p.appendChild(text);dataList.appendChild(p);}})console.log("dataList.innerHTML：" + dataList.innerHTML)if (dataList.innerHTML == '') {var p = document.createElement('p');var text = document.createTextNode('暂无数据');p.style.color = '#d7d7d7';p.onclick = function () {event.stopImmediatePropagation(); } //阻止事件的冒泡p.appendChild(text);dataList.appendChild(p);}}function pushInput() {//利用事件委托机制,获取点击的P源var e = event.target || event.srcElement;var input = document.getElementById('input');input.value = e.innerText;dataList.style.display = 'none';}/**stopImmediatePropagation() 和 stopPropagation()的区别在哪儿呢？后者只会阻止冒泡或者是捕获。 但是前者除此之外还会阻止该元素的其他事件发生，但是后者就不会阻止其他事件的发生**/</script></body></html>
直接CV大法后，会发现这个功能已经实现了，但自己的需求还没有实现，那就是在动态表格实现。
这里承接我的上一篇实现动态表格，在上一篇中，我的每一行数据都有根据时间生成的自己的id，这样会有辨识性，知道自己的提示的div要在哪个input下面显示，看代码`
<div class="search"><input id="input1" type="text" placeholder="请输入" οnfοcus="showDiv(this)" οninput="filterP(this)"><div id="dataList1" class="content" οnclick="pushInput(this)" style="display:none;"><option value="白菜">白菜</option><option value="金针菇">金针菇</option>
新增一行中
function add(){var trid = new Date().getTime();var shop = document.getElementById("kemu").innerText;var gy = document.getElementById("gys").value;var dk = document.getElementById("dk").value;var packageid=trid+'packageid';var countid=trid+'countid';var priceid=trid+'priceid';var nameid = trid + 'nameid';var objtr=document.createElement('tr');objtr.id=trid;objtr.innerHTML="<td ></td> " +" <td><input type='date' style='width:120px'></td> " +" <td><input id='"+trid+"countid'></input></td> " +" <td><select lay-filter='contrller1' id='"+trid+"'><option value=''>科目名称</option><option value='食材成本'>食材成本</option><option value='干调成本'>干调成本</option> <option value='色拉油成本'>色拉油成本</option><option value='冻货成本'>冻货成本</option><option value='水果成本'>水果成本</option><option value='粮食成本'>粮食成本</option><option value='中厨酱料'>中厨酱料</option> <option value='鱼类成本'>鱼类成本</option><option value='牛蛙成本'>牛蛙成本</option><option value='酒水成本'>酒水成本</option><option value='牛蛙成本'>返箱款</option><option value='酒水成本'>搭赠</option></td>" +" <td><p id='"+trid+"id'></td> " +" <td> <div class='search'><input id='input"+trid+"' type='text' placeholder='请输入' οnfοcus='showDiv(this)' οninput='filterP(this)'><div id='dataList"+trid +"' class='content' οnclick='pushInput(this)' style='display:none;'> <option value='白菜'>白菜</option><option value='金针菇'>金针菇</option><option value='红尖椒'>红尖椒</option><option value='黄彩椒'>黄彩椒</option> <option value='西芹'>西芹</option> <option value='大葱'>大葱</option> <option value='香葱'>香葱</option> <option value='香菜'>香菜</option> <option value='泰椒'>泰椒</option> <option value='杭椒'>杭椒</option> <option value='山药'>山药</option> <option value='黄瓜'>黄瓜</option> <option value='地瓜'>地瓜</option> <option value='油麦菜'>油麦菜</option> <option value='莲藕'>莲藕</option> <option value='青笋'>青笋</option><option value='干豆腐'>干豆腐</option><option value='黄豆芽'>黄豆芽</option> <option value='圆葱'>圆葱</option><option value='鸡蛋'>鸡蛋</option><option value='土豆'>土豆</option> <option value='胡萝卜'>胡萝卜</option> <option value='净蒜'>净蒜</option><option value='姜'>姜</option><option value='大豆腐'>大豆腐</option><option value='鸭血'>鸭血</option> <option value='绿豆芽'>绿豆芽</option> <option value='鲜蘑'>鲜蘑</option> <option value='尖椒'>尖椒</option> <option value='绿美人椒'>绿美人椒</option> <option value='绿泰椒'>绿泰椒</option> <option value='茄子'>茄子</option> <option value='西蓝花'>西蓝花</option> <option value='青蒜'>青蒜</option> <option value='红薯粉'>红薯粉</option> <option value='玉米粒'>玉米粒</option> <option value='精盐'>精盐</option> <option value='味素'>味素</option> <option value='鸡精'>鸡精</option> <option value='白糖'>白糖</option> <option value='白醋'>白醋</option> <option value='保宁醋'>保宁醋</option> <option value='恒顺香醋'>恒顺香醋</option> <option value='蒜头粉'>蒜头粉</option> <option value='灯笼椒'>灯笼椒</option> <option value='花椒油'>花椒油</option> <option value='乌冬面'>乌冬面</option> <option value='魔芋丝'>魔芋丝</option> <option value='木耳'>木耳</option> <option value='东古酱油'>东古酱油</option> <option value='宽粉'>宽粉</option> <option value='卡夫奇妙酱'>卡夫奇妙酱</option> <option value='去皮花生'>去皮花生</option> <option value='白砂糖'>白砂糖</option> <option value='冰糖'>冰糖</option> <option value='沙拉酱'>沙拉酱</option> <option value='蓝莓酱'>蓝莓酱</option> <option value='干锅酱'>干锅酱</option> <option value='辣妹子'>辣妹子</option> <option value='蚝油'>蚝油</option> <option value='腐竹'>腐竹</option> <option value='香辣酱'>香辣酱</option> <option value='红糖'>红糖</option> <option value='美极鲜'>美极鲜</option> <option value='土豆粉'>土豆粉</option> <option value='调和油'>调和油</option> <option value='鸡汁'>鸡汁</option> <option value='白芝麻'>白芝麻</option> <option value='奶粉'>奶粉</option> <option value='麻辣鲜露'>麻辣鲜露</option> <option value='辣鲜露'>辣鲜露</option> <option value='炼乳'>炼乳</option> <option value='淀粉'>淀粉</option> <option value='红麻椒'>红麻椒</option> <option value='绿麻椒'>绿麻椒</option> <option value='三文治'>三文治</option> <option value='黄栀子'>黄栀子</option> <option value='葡萄干'>葡萄干</option> <option value='麻酱'>麻酱</option> <option value='白酒'>白酒</option> <option value='十三香'>十三香</option> <option value='胡椒粉'>胡椒粉</option> <option value='鲁花调和油'>鲁花调和油</option> <option value='色拉油'>色拉油</option> <option value='鱼豆腐'>鱼豆腐</option> <option value='墨鱼丸'>墨鱼丸</option> <option value='肥牛'>肥牛</option> <option value='小油条'>小油条</option> <option value='小馒头'>小馒头</option> <option value='情人果'>情人果</option> <option value='冰爽海草'>冰爽海草</option> <option value='椒麻鸡爪'>椒麻鸡爪</option> <option value='亲亲肠'>亲亲肠</option> <option value='培根'>培根</option> <option value='鸡翅（干锅）'>鸡翅（干锅）</option> <option value='大虾'>大虾</option> <option value='天景玉米'>天景玉米</option> <option value='鸡腿'>鸡腿</option> <option value='鲜花椒'>鲜花椒</option> <option value='五花肉'>五花肉</option> <option value='牛肉'>牛肉</option> <option value='毛肚'>毛肚</option> <option value='千层肚'>千层肚</option> <option value='黄喉'>黄喉</option> <option value='脑花'>脑花</option> <option value='鸡爪'>鸡爪</option> <option value='鸡胗'>鸡胗</option> <option value='午餐肉'>午餐肉</option> <option value='牛油'>牛油</option> <option value='鸭头'>鸭头</option> <option value='白条公鸡'>白条公鸡</option> <option value='扇贝'>扇贝</option> <option value='百叶'>百叶</option> <option value='鱿鱼'>鱿鱼</option> <option value='猪颈肉'>猪颈肉</option> <option value='干贝'>干贝</option> <option value='红糖糍粑'>红糖糍粑</option> <option value='猪腰'>猪腰</option> <option value='金钻奶油'>金钻奶油</option> <option value='西瓜'>西瓜</option> <option value='哈密瓜'>哈密瓜</option> <option value='香蕉'>香蕉</option> <option value='苹果'>苹果</option> <option value='梨'>梨</option> <option value='菠萝'>菠萝</option> <option value='柠檬'>柠檬</option> <option value='火龙果'>火龙果</option> <option value='圣女果（小柿子）'>圣女果（小柿子）</option> <option value='儿童饺子'>儿童饺子</option> <option value='手擀面'>手擀面</option> <option value='馒头'>馒头</option> <option value='花卷'>花卷</option> <option value='大饼子'>大饼子</option> <option value='糖三角'>糖三角</option> <option value='米粉'>米粉</option> <option value='饺子皮'>饺子皮</option> <option value='辣椒段'>辣椒段</option> <option value='藤椒油'>藤椒油</option> <option value='辣椒王'>辣椒王</option> <option value='小米辣'>小米辣</option> <option value='二荆条'>二荆条</option> <option value='海带'>海带</option> <option value='紫香菜'>紫香菜</option> <option value='皮蛋'>皮蛋</option> <option value='孜然粉'>孜然粉</option> <option value='冰粉'>冰粉</option> <option value='底料'>底料</option> <option value='酸菜'>酸菜</option> <option value='十三香酱'>十三香酱</option> <option value='白胡椒粉'>白胡椒粉</option> <option value='凉菜红油'>凉菜红油</option> <option value='麻椒面'>麻椒面</option> <option value='烧烤辣椒面'>烧烤辣椒面</option> <option value='高汤'>高汤</option> <option value='牛蛙料'>牛蛙料</option> <option value='烧烤撒料'>烧烤撒料</option> <option value='鸡油'>鸡油</option> <option value='油酥豆'>油酥豆</option> <option value='安多夫'>安多夫</option> <option value='小苏打'>小苏打</option> <option value='干油碟'>干油碟</option> <option value='5号辣子'>5号辣子</option> <option value='白卤二号'>白卤二号</option> <option value='五香卤'>五香卤</option> <option value='烤鱼红油'>烤鱼红油</option> <option value='烤鱼辣椒面'>烤鱼辣椒面</option> <option value='酱香酱'>酱香酱</option> <option value='蒜香酱'>蒜香酱</option> <option value='剁椒酱'>剁椒酱</option> <option value='泡菜'>泡菜</option> <option value='豆豉'>豆豉</option> <option value='香锅辣酱'>香锅辣酱</option> <option value='香锅酱香酱'>香锅酱香酱</option> <option value='豆瓣酱'>豆瓣酱</option> <option value='大油'>大油</option> <option value='牛蛙酱'>牛蛙酱</option> <option value='牛肉'>牛肉</option> <option value='烧烤鸡翅'>烧烤鸡翅</option> <option value='黑鱼片'>黑鱼片</option> <option value='龙利鱼'>龙利鱼</option> <option value='气泡酒'>气泡酒</option> <option value='薄荷糖'>薄荷糖</option> <option value='奶茶'>奶茶</option> <option value='小芋圆'>小芋圆</option> <option value='珍珠'>珍珠</option> <option value='五彩豆'>五彩豆</option> <option value='小红豆'>小红豆</option> <option value='爆爆珠'>爆爆珠</option> <option value='椰果'>椰果</option> <option value='桂花蜜'>桂花蜜</option> <option value='可可球'>可可球</option> <option value='百香果'>百香果</option> <option value='草莓'>草莓</option> <option value='奇异果'>奇异果</option> <option value='玉米泥'>玉米泥</option> <option value='黄桃'>黄桃</option> <option value='酸梅汁'>酸梅汁</option> <option value='清江鱼'>清江鱼</option> <option value='三道鳞'>三道鳞</option> <option value='江团'>江团</option> <option value='草鱼'>草鱼</option> <option value='黑鱼'>黑鱼</option> <option value='小龙虾'>小龙虾</option> <option value='牛蛙'>牛蛙</option> <option value='泉阳泉'>泉阳泉</option> <option value='雪碧'>雪碧</option> <option value='可乐'>可乐</option> <option value='可乐0°'>可乐0°</option> <option value='青岛优质'>青岛优质</option> <option value='青岛纯生'>青岛纯生</option> <option value='雪花干啤'>雪花干啤</option> <option value='雪花原汁麦'>雪花原汁麦</option> <option value='雪花勇闯天涯'>雪花勇闯天涯</option> <option value='加多宝'>加多宝</option> <option value='劲酒'>劲酒</option> <option value='江小白'>江小白</option> </div></div></td>" +" <td><input id='"+trid+"priceid'></td> " +" <td><input id='"+trid+"priceid'></td> " +" <td><input id='"+trid+"priceid'></td> " + " <td><input id='"+trid+"priceid'></td> " +" <td><input id='"+trid+"priceid'></td> " +" <td><input id='"+trid+"priceid'></td> " +" <td><input id='"+trid+"priceid'></td> " +" <td><button type='button' οnclick='del(this)'>删除</button></td></div>";document.getElementById("tbodyid").appendChild(objtr);var tbodyobj=document.getElementById('tbodyid');var countchildren=tbodyobj.childElementCount;var form = layui.form;form.render();for (var i=0;i<countchildren;i++){tbodyobj.children[i].children[0].innerHTML=i+1;tbodyobj.children[i].children[9].innerHTML=shop;tbodyobj.children[i].children[11].innerHTML=dk;tbodyobj.children[i].children[10].innerHTML=gy;}
与最上面的代码不同的是，在方法中添加了this，知道自己点的是哪一行的，让div显示了哪一行的下面。
