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


Posted in Javascript onJune 21, 2018

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

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

<!------------搜索框模糊查询带下拉匹配效果html---------------------->
<div class="gover_search">
  <div class="gover_search_form">
    <form action="#" method="post" name="searchform" id="searchform" class="searchinfo">
      <ul>
        <li>
          <input type="text" id="tt" value="" class="text" autocomplete="off" />
          <p class="search"><img src="img/search-1.png" alt=""></p>
          <p class="camera"><img src="img/camera.png" alt=""></p>
        </li>
        <li class="searchBtns-1"><img src="img/searchBtn.png" alt=""></li>
      </ul>
    </form>
  </div>
</div>

---搜索框模糊查询带下拉匹配效果-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的样式,自我调整哈<link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" >

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

<script src="js/jquery-3.1.1.js"></script>
<script src="js/index.js"></script>
<script src="js/jquery.bigautocomplete.js"></script>

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

// 隐藏的搜索框下拉列表
$(function () {
  var num = 0;
  $("#tt").bigAutocomplete({
    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: "五粮液<span class='keyRightSpan'>约2个结果</span>"},
      {title: "水井坊<span class='keyRightSpan'>约7个结果</span>"},
      {title: "汾酒<span class='keyRightSpan'>约3个结果</span>"},
      {title: "洋府<span class='keyRightSpan'>约2个结果</span>"},
      {title: "董酒<span class='keyRightSpan'>约5个结果</span>"},
      {title: "剑南春<span class='keyRightSpan'>约2个结果</span>"},
      {title: "劲酒<span class='keyRightSpan'>约8个结果</span>"}],
    callback: function (data) {
      console.log(data.title);
    }
  });
})

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

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

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

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

总结

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

Javascript 相关文章推荐
利用jQuery的deferred对象实现异步按顺序加载JS文件
Mar 17 Javascript
jQuery中读取json文件示例代码
May 10 Javascript
Jquery事件的连接使用示例
Jun 18 Javascript
如何利用AngularJS打造一款简单Web应用
Dec 05 Javascript
利用jquery制作滚动到指定位置触发动画
Mar 26 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
Apr 19 Javascript
浅析Bootstrap表格的使用
Jun 23 Javascript
bootstrap vue.js实现tab效果
Feb 07 Javascript
express 项目分层实践详解
Dec 10 Javascript
JavaScript变量作用域及内存问题实例分析
Jun 10 Javascript
vue路由传参页面刷新参数丢失问题解决方案
Oct 08 Javascript
浅析Vue 生命周期
Jun 21 #Javascript
vue数组对象排序的实现代码
Jun 20 #Javascript
vue项目实现github在线预览功能
Jun 20 #Javascript
node thread.sleep实现示例
Jun 20 #Javascript
解决循环中setTimeout执行顺序的问题
Jun 20 #Javascript
Vue.use源码学习小结
Jun 20 #Javascript
Vuex入门到上手教程
Jun 20 #Javascript
You might like
PHP解析目录路径的3个函数总结
2014/11/18 PHP
修复ShopNC使用QQ 互联时提示100010 错误
2015/11/08 PHP
PHP中的表达式简述
2016/05/29 PHP
使用composer命令加载vendor中的第三方类库 的方法
2019/07/09 PHP
Extjs学习笔记之三 extjs form更多的表单项
2010/01/07 Javascript
JS 实现完美include载入实现代码
2010/08/05 Javascript
JQuery开发的数独游戏代码
2010/10/29 Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
2010/12/10 Javascript
js+div实现文字滚动和图片切换效果代码
2015/08/27 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
2016/06/07 Javascript
js重写方法的简单实现
2016/07/10 Javascript
JS实现批量上传文件并显示进度功能
2017/06/27 Javascript
js使用原型对象(prototype)需要注意的地方
2017/08/28 Javascript
layui结合form,table的全选、反选v1.0示例讲解
2018/08/15 Javascript
Three.js实现3D机房效果
2018/12/30 Javascript
ES6 Array常用扩展的应用实例分析
2019/06/26 Javascript
ES6中定义类和对象的方法示例
2019/07/31 Javascript
vue设置全局访问接口API地址操作
2020/08/14 Javascript
[13:40]TI3青蛙君全程回顾 DOTA2我们为梦想再战
2013/09/13 DOTA
[04:41]2014DOTA2国际邀请赛 Liquid顺利突围晋级正赛
2014/07/09 DOTA
[09:22]2014DOTA2西雅图国际邀请赛 主赛事第二日TOPPLAY
2014/07/21 DOTA
Python生成8位随机字符串的方法分析
2017/12/05 Python
app内嵌H5 webview 本地缓存问题的解决
2020/10/19 HTML / CSS
澳大利亚电子产品购物网站:Dick Smith
2017/02/02 全球购物
Amara德国:家居饰品、设计师品牌和豪华礼品
2019/05/20 全球购物
英国在线定做百叶窗网站:Make My Blinds
2020/08/17 全球购物
应届生求职推荐信
2013/10/28 职场文书
电信专业毕业生推荐信
2013/11/18 职场文书
计算机专业学生的自我评价
2013/12/15 职场文书
五年级语文教学反思
2014/01/30 职场文书
2014年幼儿园植树节活动方案
2014/03/02 职场文书
乡村卫生服务一体化管理实施方案
2014/03/30 职场文书
怀念母亲教学反思
2014/04/28 职场文书
大学优秀班主任事迹材料
2014/05/02 职场文书
小学生优秀评语
2014/12/29 职场文书
2019军训心得体会
2019/06/27 职场文书