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

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

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

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

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

总结

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

(0)

相关推荐

  • JSuggest自动匹配下拉框使用方法(示例代码)

    1.下载jquery-latest.js,JSuggest.js和JSuggest.css JSuggest.js源代码如下 复制代码 代码如下: /*** * Description : JSuggest 下拉提示框*/ function JSuggest(){ // DIV下拉框this.div = null; // DIV下的ulthis.ul = null; // 文本输入框this.input = null; // 当前DIV所选的LI对象this.current_li = null;

  • JS仿百度自动下拉框模糊匹配提示

    实际项目中,我们可以把数据获取改成ajax动态获取,在 getContent()中 <!DOCTYPE> <html> <head> <title>js/jQuery实现类似百度搜索功能</title> <meta name="Author" content="Michael"> <meta name="Keywords" content="js/jQuery

  • AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)

    注:添加球员的功能无指定技术要求,添加球员的页面也无具体样式要求. 1.实现上图页面所有元素,页面布局规整,跟上图效果一致 2.实现文案显示,按效果显示 3.实现查询,实现查询敏感词过滤,实现查询后列表变化 4.实现倒序,实现正序,下拉列表排序效果都实现 5.按钮背景一致,按钮样式 6.实现添加球员页面,添加球员页面样式,添加球员功能,添加球员必填项判断,添加完球员后能显示在表格内,已存在球员判重. 7.表格样式跟上图样式一致 代码: <!DOCTYPE html> <html lang

  • Node.js对MongoDB数据库实现模糊查询的方法

    前言 模糊查询是数据库的基本操作之一,实现对给定的字符串是否与指定的模式进行匹配.如果字符完全匹配,可以用=等号表示,如果部分匹配可认为是一种模糊查询.在关系型数据中,通过SQL使用like '%fens%'的语法.那么在mongodb中我们应该如何实现模糊查询的效果呢. 目录 mongodb模糊查询 nodejs通过mongoose的模糊查询 1. mongodb模糊查询 我们打开mongodb,以name文字字段进行测试. 精确查询 当{'name':'未来警察'}时,精确匹配到一条记录.

  • JS中Select下拉列表类(支持输入模糊查询)功能

    下面给大家分享一段代码关于select下拉列表类支持输入模糊查询功能的实现代码,具体代码如下所示: <span style="font-size:14px;"> <HTML> <HEAD> <META http-equiv='Content-Type' content='text/html; charset=gb2312'> <TITLE>可输入的下拉框</TITLE> </HEAD> <BODY

  • js实现带搜索功能的下拉框实时搜索实时匹配

    1. 当select输入框中每输入一点内容的时候,在option中找出与内容匹配的选项显示在option的前面选项中. 2. 如何获取每次输入的内容,当keyup的时候触发函数. 问题:select标签中可以输入内容吗?(解决:另一篇文章可选择和输入的下拉列表框 ) 3. 如何获得输入框中的内容?(解决,在输入框上添加onkeyup时间触发的函数用js获得) 4. 如何匹配?(解决) 4.1 如何获得所有option中的内容?(解决) 复制代码 代码如下: function getSelectT

  • JS Select下拉框(支持输入模糊查询)

    本文实例为大家分享了支持输入模糊查询的Select下拉框,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> <Script Language="Javascript"> f

  • js模糊查询实例分享

    首先要明白什么是模糊查询(废话又来了),就是根据关键字把列表中符合关键字的一项或某项罗列出来,也就是要检查列表的每一项中是否含有关键字,因此抽象一下就是一个字符串中是否含有某个字符或者字符串. 以下例子没有接触到后台数据的知识,只是查询当前表格中每一行所包含的关键字. 用到的方法为:string.indexOf(''); 找出字符串中某个字符的位置,而如果没有目标字符会返回-1. 实现代码: <meta charset="UTF-8"> <title></

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

    "搜索"可以使我们更快的找到某一个关键词或者某一个商品,所以"模糊查询"和"下拉匹配"也成了前端必备的一个小技能,开门见山,希望对朋友们有帮助. ---搜索框模糊查询带下拉匹配效果html--- <!------------搜索框模糊查询带下拉匹配效果html----------------------> <div class="gover_search"> <div class="go

  • js仿手机页面文件下拉刷新效果

    最后弄出了一个简单的下拉刷新页面的形式,还不算太复杂 要在仿真器下才能看到效果,比如chrome的里边(或者用手机浏览器查看,但测试发现有些浏览器有问题,目前手机猎豹是没问题的) 主要就是: 下拉-->提示松开刷新-->松开后-->开始刷新-->刷新成功后还原 html,css部分 style type="text/css"> #slideDown{margin-top: 0;width: 100%;} #slideDown1,#slideDown2{wi

  • Js点击弹出下拉菜单效果实例

    复制代码 代码如下: <STYLE type=text/css> .menu { BORDER-RIGHT: #006080 2px solid; BORDER-TOP: #80e0ff 2px solid; LEFT: 0px; VISIBILITY: hidden; BORDER-LEFT: #80e0ff 2px solid; BORDER-BOTTOM: #006080 2px solid; POSITION: absolute; TOP: 0px; BACKGROUND-COLOR:

  • JS+CSS实现的经典圆角下拉菜单效果代码

    本文实例讲述了JS+CSS实现的圆角下拉菜单效果代码.分享给大家供大家参考,具体如下: 相信不少朋友会喜欢这一款菜单,CSS+JS实现的圆角下拉菜单,没有使用任何修饰性的图片哦,圆角完全是用JS完成的,因此代码多了些,想使用的朋友把JS文件提取出来另存,这样更合理些. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-jd-cicle-style-button-demo/ 具体代码如下: <!DOCTYPE html PUBLIC &qu

  • js实现带圆角的多级下拉菜单效果

    本文实例讲述了js实现带圆角的多级下拉菜单效果.分享给大家供大家参考.具体如下: 这是一款酷黑的圆角多级下滑菜单,可支持三级,鼠标放上后可见到滑出的菜单,调用了一个JS封装库,代码有些复杂,有兴趣的可研究. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-down-show-menu-style-codes/ 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transition

  • Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件

    带下拉选项的输入框 (Textbox with Dropdown) 是既允许用户从下拉列表中选择输入又允许用户自由键入输入值.这算是比较常见的一种 UI 元素,可以为用户提供候选项节省操作时间,也可以给可能存在的少数情况提供适配的可能. 本来想着这个组件比较常见应该已经有比较多现成的例子可以直接应用,但是搜索了一圈发现很多类似的组件都具备了太多的功能,例如搜索,多选等等 (简单说:太复杂了!).于是就想着还是自己动手写一个简单易用的,此处要感谢肥老板在我困惑时的鼎力相助. 这个 UI 元素将被用

  • .NET使用js制作百度搜索下拉提示效果(不是局部刷新)实现思路

    搞了个不是局部刷新的百度搜索框下拉提示效果,在被领导批了n次后,问了n次后,弄出来了,真心感觉我这个小脑壳,太不灵光了,太懒了.记录下来,以免忘记. 大致思路:前台放一个input标签,然后当该标签内的值输入有变化的时候,调用后台代码查询 符合条件的数据绑定ListBox. 具体实现思路:一个input,当输入值变化时,调用后台代码.但是怎么调用呢,这个是个问题了,在该input下放一个隐藏的服务器控件button,隐藏该控件,当input里值变化时,调用js,在js里触发该按钮的onclick

  • jquery带下拉菜单和焦点图代码分享

    jquery带下拉菜单和焦点图是一款顶部通栏带二级下拉菜单和banner导航菜单代码.感兴趣的朋友快来学习学习吧 运行效果图:                           ----------------------查看效果 下载源码----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery带下拉菜单和焦点图如下 <head> <meta http-equiv="Content-Type"

  • JS实现快速的导航下拉菜单动画效果附源码下载

    这是一个带变形动画特效的下拉导航菜单特效.该导航菜单在菜单项之间切换时,下拉菜单会快速的根据菜单内容的大小来动态变形,显示合适的下拉菜单大小,效果非常棒. 查看演示     下载源码 HTML 该导航菜单的HTML结构如下: <header class="cd-morph-dropdown"> <a href="#0" class="nav-trigger">Open Nav<span aria-hidden=&qu

  • JavaScript实现带箭头标识的多级下拉菜单效果

    本文实例讲述了JavaScript实现带箭头标识的多级下拉菜单效果.分享给大家供大家参考.具体如下: 这是一个支持多级显示的JS菜单,鼠标移向带有小三角的菜单项,可下拉出二级子菜单项,在该主菜单的上方会显示标记,指引当前的位置,本菜单代码使用了一个JS类,可根据代码地址自行下载,这个菜单未在网上测试,用在自己的网站里可能要修改代码. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-focus-m-select-menu-nav-codes/

随机推荐