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 相关文章推荐
Document.location.href和.replace的区别示例介绍
Mar 04 Javascript
jQuery.each使用详解
Jul 07 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
Dec 01 Javascript
即将发布的jQuery 3 有哪些新特性
Apr 14 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
Sep 04 Javascript
Vue.js每天必学之过渡与动画
Sep 06 Javascript
js下载文件并修改文件名
May 08 Javascript
Angularjs实现下拉框联动的示例代码
Aug 22 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
Mar 06 Javascript
javascript实现5秒倒计时并跳转功能
Jun 20 Javascript
JS多个异步请求 按顺序执行next实现解析
Sep 16 Javascript
vue组件传值的实现方式小结【三种方式】
Feb 05 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 连接mssql数据库 初学php笔记
2010/03/01 PHP
PHP的博客ping服务代码
2012/02/04 PHP
thinkPHP5.0框架开发规范简介
2017/03/25 PHP
javascript实现的网页局布刷新效果
2008/12/01 Javascript
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2012/07/21 Javascript
js动态往表格的td中添加图片并注册事件
2014/06/12 Javascript
JS判断移动端访问设备并加载对应CSS样式
2014/06/13 Javascript
js实现照片墙功能实例
2015/02/05 Javascript
jQuery实现的支持IE的html滑动条
2015/03/16 Javascript
举例详解JavaScript中Promise的使用
2015/06/24 Javascript
js计算文本框输入的字符数
2015/10/23 Javascript
如何在 Vue.js 中使用第三方js库
2017/04/25 Javascript
JS动态添加的div点击跳转到另一页面实现代码
2017/09/30 Javascript
React Native时间转换格式工具类分享
2017/10/24 Javascript
微信小程序中遇到的iOS兼容性问题小结
2018/11/14 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
JavaScript 链表定义与使用方法示例
2020/04/28 Javascript
[33:28]完美世界DOTA2联赛PWL S3 PXG vs GXR 第三场 12.19
2020/12/24 DOTA
Python初学时购物车程序练习实例(推荐)
2017/08/08 Python
Python编程使用tkinter模块实现计算器软件完整代码示例
2017/11/29 Python
django 开发忘记密码通过邮箱找回功能示例
2018/04/17 Python
Python实现模拟浏览器请求及会话保持操作示例
2018/07/30 Python
小白入门篇使用Python搭建点击率预估模型
2018/10/12 Python
Django model update的多种用法介绍
2020/03/28 Python
Python迭代器iterator生成器generator使用解析
2019/10/24 Python
python利用JMeter测试Tornado的多线程
2020/01/12 Python
PyCharm vs VSCode,作为python开发者,你更倾向哪种IDE呢?
2020/08/17 Python
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
2020/08/19 HTML / CSS
KEETSA环保床垫:更好的睡眠,更好的生活!
2016/11/24 全球购物
美国床垫和床上用品公司:Nest Bedding
2017/06/12 全球购物
加拿大折扣、优惠券和交易网站:WagJag
2018/02/07 全球购物
Anthropologie英国:美国家喻户晓的休闲服装和家居产品品牌
2018/12/05 全球购物
建筑经济管理专业求职信分享
2014/01/06 职场文书
售后服务承诺书
2014/03/26 职场文书
婚宴新郎致辞
2015/07/28 职场文书
python 标准库原理与用法详解之os.path篇
2021/10/24 Python