搜索框的制作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>搜索框</title>
<style type="text/css">
.one{
margin: 0px auto;
padding: 0px 0px;
width: 225px;
}
.one1{
margin: 2px auto;
padding: 0px 0px;
width: 225px;
height: auto;
border: 1px solid gainsboro;
display: none;
}
p{
margin: 0 0;
padding: 0 0;
}
</style>
</head>
<body>
<div class="one">
<div id="">
<input type="text" id="val" placeholder="請輸入內容"/>
<input type="submit" value="搜索" id="sub"/>
</div>
<div class="one1" id="show"></div>
</div>
<script>
let arr = ['資料庫 299元','計算機網路 199元','計算機組成原理 300元',
'java實踐課程 500元','大學英語 150元','軟體工程 230元','web前端 150元',
'ps實踐與理論 139元','java ee企業級框架 459元','框架技術 249元'];
//邏輯：1.展示區域的顯示與隱藏
let inpu = document.getElementById('val');
let show = document.getElementById('show');
inpu.onkeyup = function(){
show.style.display = 'block';//隱藏
//input.value 和資料進行比較，并將得到的結果放到str中
let str ='';
arr.forEach((item)=>{
let res = item.indexOf(inpu.value);
if (res !=-1) {
//拼接在p標簽里面
str += '<p>'+item+'<p>'
}
})
//判斷，匹配結果為慷訓者不存在，給出提示，沒有判斷，當輸入框為空時顯示全部資料
if(!inpu.value || !str){
show.innerHTML='<p>您輸入的內容不存在<p>'
}else{
show.innerHTML = str;
}
}
inpu.onblur = function(){
show.style.display = 'none';
inpu.value = '';
}
</script>
</body>
</html>
運行結果：
喜歡的朋友請點贊＋關注，謝謝！！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/252131.html
標籤：其他
上一篇：HTML
下一篇：C語言編程＞第二十周 ④ 下列給定程式中，函式fun的功能是：從N個字串中找出最長的字串，并將其地址作為函式值回傳。各字串在主函式中輸入，并放入一個字串陣列中。