熟悉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顯示了哪一行的下面。