在动态表格中智能搜索框JS实现（layui的智能搜索不能手动输入的问题解决）

最新推荐文章于 2024-01-09 16:34:35 发布

qq_43014162

最新推荐文章于 2024-01-09 16:34:35 发布

阅读量690

点赞数 1

分类专栏：日常学习文章标签： js javascript

本文链接：https://blog.csdn.net/qq_43014162/article/details/104857462

版权

日常学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

熟悉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;
        }