“搜索”可以使我们更快的找到某一个关键词或者某一个商品，所以“模糊查询”和“下拉匹配”也成了前端必备的一个小技能，开门见山，希望对朋友们有帮助。

---搜索框模糊查询带下拉匹配效果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;

}

/*搜索框下拉列表关键字数量*/

.keyRightSpan{

float: right;

display: block;

width: auto;

height: 25px !important;

line-height: 25px !important;

padding-right:8px

}

.ct{

background-color: #fff;

}

/*关闭搜索框下拉列表按钮*/

.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%;

}

因为是用了bootstrap框架，所以引入了bootstrap的样式，自我调整哈

样式写好以后就是js实现下来匹配了，最主要的是jquery.bigautocomplete.js的引入

---搜索框模糊查询带下拉匹配效果-js---

// 隐藏的搜索框下拉列表

$(function () {

var num = 0;

$("#tt").bigAutocomplete({

width: 543,

data: [{title: "牛栏山约5个结果", result: {ff: "qq"}},

{title: "郎酒约2个结果"},

{title: "茅台约4个结果"},

{title: "五粮液约2个结果"},

{title: "水井坊约7个结果"},

{title: "汾酒约3个结果"},

{title: "洋府约2个结果"},

{title: "董酒约5个结果"},

{title: "剑南春约2个结果"},

{title: "劲酒约8个结果"}],

callback: function (data) {

console.log(data.title);

}

});

})

接下来就是这个效果的截图

可以鼠标悬浮时选中某一个关键词，然后点击的时候把它的值(value)放在input框里

总结

以上所述是小编给大家介绍的JS实现模糊查询带下拉匹配效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！