JAVASCRIPT實現搜索框的自動完成效果(一)
來自： http://www.wutongwei.com/front/infor_showone.tweb?id=212
Javascript實現搜索框的自動完成效果(一)
作者 :towaywu
<p> 2016-02-25 11:04:23.0 </p>
<p> 33 瀏覽 </p>
<p> 類別 :編程語言 <a href="/misc/goto?guid=4959666156021639425" rel="nofollow,noindex" target="_blank">前端編程</a> <a href="/misc/goto?guid=4959666155918942416" rel="nofollow,noindex" target="_blank">HTML/CSS/JAVASCRIPT</a> </p>
</div>
</div>
在很多需要搜索的網站, 都會有一個自動完成的搜索框. 方便用戶查找他們想要的搜索詞. 幫助用戶快速找到自己想要的結果. 這種方式是比較友好的. 所以是比較提倡使用的.
我們這次就來實現這一效果. 我們通過兩篇文章來進行講解. 首先我們來完成界面的設計布局.
界面的HTML結構, 第一個少不了的是一個搜索框, 第二個就是搜索的點擊按鈕.
<div class="search"> <input type="text" value=""> <button>搜索</button> </div>
這就是最簡單的搜索框的設計. 那CSS代碼怎么處理. 以前用得多的是使用float來進行處理, 然后給搜索框一個邊框,設置一個padding. 然后給按鈕去除邊框,設置一個背景. 這里我們使用flex布局方式. 這樣更簡便點. 不用考慮清除浮動效果.當然這里就要考慮兼容性問題了.
.search {
display: inline-flex;
height: 35px;
margin: 50px auto;
position: relative;
}
.search input {
border: #eee 1px solid;
background-color: #fff;
outline: none;
width: 200px;
padding: 0 5px;
}
.search button {
background-color: #ff3300;
color: #fff;
border: none;
width: 80px;
}
這時候我們繼續往下考慮, 如果用戶輸入了關鍵詞, 那就得顯示一個列表的相關詞語. 那這時候我們需要加入一個詞語列表.
比如
<ul> <li><a href="#">武林外傳</a> </li> <li><a href="#">葵花寶典</a> </li> <li><a href="#">如來佛掌</a> </li> <li><a href="#">九陰白骨爪</a> </li> </ul>
我們將這行代碼追加到.search的內容后面.然后設置CSS代碼, 我們設置他的最小寬度為.search寬度減去搜索按鈕的寬度.這樣就跟搜索框一樣寬.
.search ul {
position: absolute;
left: 0;
top: 35px;
border: #eee 1px solid;
min-width: calc(100% - 80px);
text-align: left;
}
.search ul a {
display: block;
padding: 5px;
}
這得在CSS代碼之前, 將默認的一些瀏覽器樣式清除.最后效果如下.
好了. 下一篇文章我們完成JS的代碼控制.
本文屬于吳統威的博客, 微信公眾號:bianchengderen,QQ群:186659233 的原創文章,轉載時請注明出處及相應鏈接:http://www.wutongwei.com/front/infor_showone.tweb?id=212 ,歡迎大家傳播與分享.
標簽 :javascript教程搜索框
</div>
</div>
</div>
<div>
<p>一個喜歡技術,走在創業路上的屌絲!歡迎一起交流</p>
<p> 編程的人微信公眾號: <strong>bianchengderen</strong> </p>
</div>
<p> <img src="https://simg.open-open.com/show/7ec06c8bcf57762c304cbd61f6e49583.jpg" class="alignCenter" width="430" height="430" /> </p>
<strong>交流QQ群: 186659233</strong>
</div>
</div>
</div> </div>