JS实现模糊查询带下拉匹配效果

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

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

！-搜索框模糊查询带下拉匹配效果html-div class=' govern _ search ' div class=' govern _ search _ form ' form action=' # ' method=' post ' name=' search form ' id=' search info ' ul Li输入类型=' text ' id=' TT ' value=' class=' text ' autocomplete=' off '/p class=' search ' img src=' http 3360 img/search-1。png ' alt=' '/p class=' camera ' img src=' http 3搜索框模糊查询带下拉匹配效果-css -。fl {float:左侧；}.fr {float:右侧；} .clearfix:after在{内容： }之后；显示器：块；clear:两者；可见性：隐藏；高度： 0;}.clearfix { zoom: 1}，mar 0 { margin : 0 auto } . pos1 { position : relative }输入{ border: noneoutline:无；} .w100 {宽度： 100%；}.gover _ search { width: 420px相对位置：边界半径： 20px高： 42pxborder: 2px固体# fb6910背景# fff边距-top : 50px；左边距left: 90px}。搜索信息ul {列表样式：无；}.govern _ search _ form { height : 37px；宽度： 420像素；相对位置：}/*输入框*/.搜索信息.文本{ margin : 0；宽度： 334 px高度： 38pxoutline:无；垂直对齐： 中间；向左浮动：左填充左侧： 27px线高： 40px左边距left: 16px}/*搜索按钮*/.搜索信息.按钮{宽度： 120像素高度： 40pxborder:无；背景-颜色： # 4b 140dcolor : # ffffont-size : 19px；字体粗细：粗体；大纲：无；向左浮动：}/*!-隐藏的搜索框下拉列表- */.big autocomplete-layout { position : absolute；z指数： 999；左： 0px最大高度： 260 px溢出-y:自动；溢出-x:隐藏；top: 213px！重要；宽度： 336px！重要；border: 1px固体# cccborder-top:无；显示器：无；颜色： # 004080背景-color : # fff；}.大自动完成-布局表{ width:336px！重要；}.大自动完成-布局表tr{ margin-bottom:5px！重要；光标：指针指针；}.大自动完成-布局表tr td{ height: 25px！重要；宽度： 336px！重要；padding:0 10px！重要；线高： 25px！重要；}.大自动完成-布局表tr :悬停{背景色： # FB 6910！重要；color: # fff}。大自动完成-布局表tr :悬停TD div { color : # fff}.大自动完成-布局表tr :悬停TD div span { color : # fff}/*搜索框下拉列表关键字数量*/.key right span { float : right display :块；宽度：自动；高： 25px！重要；线高： 25px！重要；填充-右侧：8px} .ct{底色-颜色： # fff}/*关闭搜索框下拉列表按钮*/.搜索{ width: 22pxheight: 22px绝对位置：top : 9pxleft : 12pxz-index : 2；}.搜索img { width : 100%；高度： 100%;}.相机{ width: 22pxheight: 22px绝对位置：top : 9pxright : 80pxz-index : 2；}.相机img { width : 100%；高度： 100%;}.searchBtn { width: 70px高度： 40px绝对位置：top : 0pxright : 0pxz-index : 2；}.搜索Btn img { width : 100%；高度： 100%;}因为是用了引导程序框架，所以引入了引导程序的样式，自我调整哈链接rel='样式表href='css/bootstrap.css' rel='外部' nofollow '

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

script src=' http : js/jquery-3 . 1 . 1 . js '/script script src=' http : js/index . js '/script script src=' http : js/jquery . big autocomplete . js '/script-具有下拉匹配效果的搜索框中的模糊查询-js-。

//隐藏搜索框下拉列表$(function(){ var num=0；$ ('# TT ')。大自动完成({width : 543，data : [{title : '牛栏山span class='keyRightSpan '约5个结果/span，result : {ff:' QQ'}}，{title : '郎酒span class='keyRightSpan '约2个结果/span'}，{title: '茅台span class='keyRightSpan '约4个结果/span'}，{ title :} });})接下来是这个效果的截图

您可以在鼠标悬停时选择一个关键字，然后在单击它时将其值放入输入框中。

摘要

以上是边肖介绍的具有下拉匹配效果的模糊查询的JS实现。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！