在輸入框中輸入字詞,通過在數(shù)據(jù)中查找相關(guān)字詞,下面彈出相關(guān)搜索
html部分
`<div class="search" id="search">
<input type="text" title="" id="txt" class="txt"><!-- 換行之間會有大概3像素 用font-size:0 -->
<a href="javascript:;" class="btn">百度一下</a>
</div>
css部分
`*{
margin: 0;
padding: 0;
}
.search{
width:420px;
height:42px;
font-size: 0px;/* 為了消除換行帶來的那幾像素 */
margin: 150px auto;
}
.search .txt{
width: 338px;
height: 40px;
border: 1px solid #ccc;
line-height: 42px;
padding: 0px 5px;
color: #282828;
font-size: 14px;
}
.search .btn{
display: inline-block;
width: 70px;
height: 42px;
text-align: center;
text-decoration: none;
font-size: 14px;
color: #fff;
line-height: 42px;
background: skyblue;
}
js部分
` function my$(id){
return document.getElementById(id)
}
//創(chuàng)建數(shù)據(jù)
var data=['想開學(xué)','啥時候開學(xué)','宿舍費能退嗎','期末考試咋考','在家宅','在家上網(wǎng)課','在家被嫌棄']
my$('txt').onkeyup=function(){
//有則刪除塞颁,無則創(chuàng)建(否則后面會創(chuàng)建很多l(xiāng)i
if(my$('dv')){
my$('search').removeChild(my$('dv'))
}
var valueTxt=this.value//獲取value值
var arr=[]//臨時聲明一個空數(shù)組來存儲匹配的數(shù)據(jù)
for(var i=0;i<data.length;i++){ //比對value值與data中的每一條數(shù)據(jù)
if(data[i].indexOf(valueTxt)!=-1){//如果要檢索的字符串值沒有出現(xiàn),則該方法返回 -1吸耿。
arr.push(data[i])
}
}
//在創(chuàng)建li前 先判斷是否匹配到
if(valueTxt==''||arr.length===0){
return
}
//根據(jù)創(chuàng)建的數(shù)據(jù)來創(chuàng)建div ul li
var div=document.createElement('div')
div.id='dv'
var ul=document.createElement('ul')
//給其添加樣式
div.style.width='348px'
div.style.border='1px solid #ccc'
div.style.marginTop='-1px'
ul.style.listStyle='none'
for(var i=0;i<arr.length;i++){
var li=document.createElement('li')
li.style.fontSize='14px'
li.style.padding='5px'
li.innerHTML=arr[i]
ul.appendChild(li)//li放入ul中
}
div.appendChild(ul)
my$('search').appendChild(div)
}