JS實(shí)現(xiàn)模糊查詢帶下拉匹配效果
“搜索”可以使我們更快的找到某一個(gè)關(guān)鍵詞或者某一個(gè)商品，所以“模糊查詢”和“下拉匹配”也成了前端必備的一個(gè)小技能，開門見山，希望對(duì)朋友們有幫助。
個(gè)舊ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)公司的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書合作）期待與您的合作！
---搜索框模糊查詢帶下拉匹配效果html---
---搜索框模糊查詢帶下拉匹配效果-css---
.fl {float: left;}
.fr {float: right;}
.clearfix:after { content: '';
display: block;
clear: both;
visibility: hidden;
height: 0;
}
.clearfix { zoom: 1}
.mar0 { margin: 0 auto;}
.pos1 {position: relative;}
input {
border: none;
outline: none;
}
.w100 {width: 100%;}
.gover_search{
width: 420px;
position: relative;
border-radius: 20px;
height: 42px;
border: 2px solid #fb6910;
background:#fff;
margin-top: 50px;
margin-left: 90px;
}
.searchinfo ul{
list-style: none;
}
.gover_search_form {
height: 37px;
width: 420px;
position: relative;
}
/*輸入框*/
.searchinfo .text{
margin: 0;
width: 334px;
height: 38px;
outline: none;
vertical-align: middle;
float: left;
padding-left: 27px;
line-height: 40px;
margin-left: 16px;
}
/*搜索按鈕*/
.searchinfo .button {
width: 120px;
height: 40px;
border: none;
background-color: #4b140d;
color: #fff;
font-size: 19px;
font-weight: bold;
outline: none;
float: left;
}
/**/
.bigautocomplete-layout{
position: absolute;
z-index: 999;
left: 0px;
max-height: 260px;
overflow-y: auto;
overflow-x: hidden;
top: 213px !important;
width: 336px !important;
border: 1px solid #ccc;
border-top: none;
display: none;
color: #004080;
background-color: #fff;
}
.bigautocomplete-layout table{
width:336px !important;
}
.bigautocomplete-layout table tr{
margin-bottom:5px !important;
cursor:pointer;
}
.bigautocomplete-layout table tr td{
height: 25px !important;
width: 336px !important;
padding:0 10px !important;
line-height: 25px !important;
}
.bigautocomplete-layout table tr:hover{
background-color:#fb6910 !important;
color:#fff;
}
.bigautocomplete-layout table tr:hover td div{
color:#fff;
}
.bigautocomplete-layout table tr:hover td div span{
color:#fff;
}
/*搜索框下拉列表關(guān)鍵字?jǐn)?shù)量*/
.keyRightSpan{
float: right;
display: block;
width: auto;
height: 25px !important;
line-height: 25px !important;
padding-right:8px
}
.ct{
background-color: #fff;
}
/*關(guān)閉搜索框下拉列表按鈕*/
.search {
width: 22px;
height: 22px;
position: absolute;
top: 9px;
left: 12px;
z-index: 2;
}
.search img {
width: 100%;
height: 100%;
}
.camera {
width: 22px;
height: 22px;
position: absolute;
top: 9px;
right: 80px;
z-index: 2;
}
.camera img {
width: 100%;
height: 100%;
}
.searchBtn {
width: 70px;
height: 40px;
position: absolute;
top: 0px;
right: 0px;
z-index: 2;
}
.searchBtn img {
width: 100%;
height: 100%;
}因?yàn)槭怯昧薭ootstrap框架，所以引入了bootstrap的樣式，自我調(diào)整哈
樣式寫好以后就是js實(shí)現(xiàn)下來匹配了，最主要的是jquery.bigautocomplete.js的引入
---搜索框模糊查詢帶下拉匹配效果-js---
// 隱藏的搜索框下拉列表
$(function () {
var num = 0;
$("#tt").bigAutocomplete({
width: 543,
data: [{title: "牛欄山約5個(gè)結(jié)果", result: {ff: "qq"}},
{title: "郎酒約2個(gè)結(jié)果"},
{title: "茅臺(tái)約4個(gè)結(jié)果"},
{title: "五糧液約2個(gè)結(jié)果"},
{title: "水井坊約7個(gè)結(jié)果"},
{title: "汾酒約3個(gè)結(jié)果"},
{title: "洋府約2個(gè)結(jié)果"},
{title: "董酒約5個(gè)結(jié)果"},
{title: "劍南春約2個(gè)結(jié)果"},
{title: "勁酒約8個(gè)結(jié)果"}],
callback: function (data) {
console.log(data.title);
}
});
})接下來就是這個(gè)效果的截圖
可以鼠標(biāo)懸浮時(shí)選中某一個(gè)關(guān)鍵詞，然后點(diǎn)擊的時(shí)候把它的值（value）放在input框里
總結(jié)
以上所述是小編給大家介紹的JS實(shí)現(xiàn)模糊查詢帶下拉匹配效果，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！
新聞標(biāo)題：JS實(shí)現(xiàn)模糊查詢帶下拉匹配效果
地址分享：http://www.jiaotiyi.com/article/iepooj.html