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 相关文章推荐
jcarousellite.js 基于Jquery的图片无缝滚动插件
Dec 30 Javascript
Javascript判断对象是否相等实现代码
Mar 18 Javascript
js中 关于undefined和null的区别介绍
Apr 16 Javascript
node.js中的socket.io入门实例
Apr 26 Javascript
JavaScript不使用prototype和new实现继承机制
Dec 29 Javascript
JavaScript实现Iterator模式实例分析
Jun 09 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
Mar 30 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
Sep 23 Javascript
简单谈谈JS数组中的indexOf方法
Oct 13 Javascript
bootstrap3-dialog-master模态框使用详解
Aug 22 Javascript
weebox弹出窗口不居中显示的解决方法
Nov 27 Javascript
详解angularjs 学习之 scope作用域
Jan 15 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
简单介绍下 PHP5 中引入的 MYSQLI的用途
2007/03/19 PHP
php 深入理解strtotime函数的使用详解
2013/05/23 PHP
php环境下利用session防止页面重复刷新的具体实现
2014/01/09 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
PHP实现SMTP邮件的发送实例
2018/09/27 PHP
YII2框架中behavior行为的理解与使用方法示例
2020/03/13 PHP
用javascript实现页面打印的三种方法
2007/03/05 Javascript
js DataSet数据源处理代码
2010/03/29 Javascript
让浏览器DOM元素最后加载的js方法
2014/07/29 Javascript
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
基于jquery实现日历签到功能
2020/09/11 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
2016/11/21 Javascript
javascript简单进制转换实现方法
2016/11/24 Javascript
js 动态生成json对象、时时更新json对象的方法
2016/12/02 Javascript
基于node下的http小爬虫的示例代码
2018/01/11 Javascript
Python多进程同步Lock、Semaphore、Event实例
2014/11/21 Python
Python编程中对文件和存储器的读写示例
2016/01/25 Python
Python极简代码实现杨辉三角示例代码
2016/11/15 Python
Python  pip安装lxml出错的问题解决办法
2017/02/10 Python
python实现数独游戏 java简单实现数独游戏
2018/03/30 Python
Python3 venv搭建轻量级虚拟环境的步骤(图文)
2019/08/09 Python
Django-imagekit的使用详解
2020/07/06 Python
怎样实现H5+CSS3手指滑动切换图片的示例代码
2019/05/05 HTML / CSS
《小石潭记》教学反思
2014/02/13 职场文书
法定代表人身份证明书
2014/09/10 职场文书
2014单位领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
党员教师四风问题对照检查材料
2014/09/26 职场文书
2014幼儿园班主任工作总结
2014/12/04 职场文书
饭店服务员岗位职责
2015/02/09 职场文书
MBA推荐信怎么写
2015/03/25 职场文书
爱心募捐通知范文
2015/04/27 职场文书
2016大学生优秀志愿者事迹材料
2016/02/25 职场文书
80行代码写一个Webpack插件并发布到npm
2021/05/24 Javascript
如何搭建 MySQL 高可用高性能集群
2021/06/21 MySQL
Win10/Win11 任务栏替换成经典样式
2022/04/19 数码科技
virtualenv隔离Python环境的问题解析
2022/06/21 Python