基于bootstrap按钮式下拉菜单组件的搜索建议插件


Posted in Javascript onMarch 25, 2017

本文实例为大家分享了Bootstrap Search Suggest搜索建议插件的具体代码,供大家参考,具体内容如下

<!DOCTYPE html> 
<html lang="zh-cn"> 
 
<head> 
 <meta charset="utf-8"> 
 <title>Bootstrap 搜索建议插件</title> 
 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 <meta name="description" content="这是一个基于 bootstrap 按钮式下拉菜单组件的搜索建议插件"> 
 <meta name="Keywords" content="Bootstrap Search Suggest,bootstrap,搜索建议插件"/> 
 <meta name="author" content="lizhiwen@meizu.com"> 
 <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet"> 
</head> 
 
<body> 
 <div class="container"> 
 <h2>bootstrap combox 搜索建议插件</h2> 
 <p>这是一个基于 bootstrap 按钮式下拉菜单组件的搜索建议插件.</p> 
 <p>使用说明:<a href="README.html" rel="external nofollow" target="_blank">README.html</a> <a href="https://github.com/lzwme/bootstrap-suggest-plugin" rel="external nofollow" target="_blank">Github</a></p> 
 <form action="index_submit" method="get" accept-charset="utf-8" role="form"> 
  <h3>测试(URL 获取)</h3> 
  <p>配置了 data-id,非下拉菜单选择输入则背景色警告。</p> 
  <div class="row"> 
  <div class="col-lg-2"> 
   <div class="input-group"> 
   <input type="text" class="form-control" id="test"> 
   <div class="input-group-btn"> 
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
    <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu dropdown-menu-right" role="menu"> 
    </ul> 
   </div> 
   <!-- /btn-group --> 
   </div> 
  </div> 
  </div> 
 
  <h3>测试(URL 获取)</h3> 
  <p>不展示下拉菜单按钮。</p> 
  <div class="row"> 
  <div class="col-lg-6"> 
   <div class="input-group"> 
   <input type="text" class="form-control" id="testNoBtn"> 
   <div class="input-group-btn"> 
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
    <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu dropdown-menu-right" role="menu"> 
    </ul> 
   </div> 
   <!-- /btn-group --> 
   </div> 
  </div> 
  </div> 
 
  <h3>测试(json 数据中获取)</h3> 
  <p>默认启用空关键字检索。</p> 
  <div class="row"> 
  <div class="col-lg-6"> 
   <div class="input-group"> 
   <input type="text" class="form-control" id="test_data"> 
   <div class="input-group-btn"> 
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
    <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu dropdown-menu-right" role="menu"> 
    </ul> 
   </div> 
   <!-- /btn-group --> 
   </div> 
  </div> 
  </div> 
 
  <h3>百度搜索</h3> 
  <p>支持逗号分隔多关键字</p> 
  <div class="row"> 
  <div class="col-lg-6"> 
   <div class="input-group" style="width: 300px;"> 
   <input type="text" class="form-control" id="baidu"> 
   <div class="input-group-btn"> 
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
    <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu dropdown-menu-right" role="menu"> 
    </ul> 
   </div> 
   <!-- /btn-group --> 
   </div> 
  </div> 
  </div> 
 
  <h3>淘宝搜索</h3> 
  <p>支持逗号分隔多关键字</p> 
  <div class="row"> 
  <div class="col-lg-6"> 
   <div class="input-group" style="width: 400px;"> 
   <input type="text" class="form-control" id="taobao"> 
   <div class="input-group-btn"> 
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
    <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu dropdown-menu-right" role="menu"> 
    </ul> 
   </div> 
   <!-- /btn-group --> 
   </div> 
  </div> 
  </div> 
 
 </form> 
 </div> 
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> 
 <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 <script src="bootstrap-suggest.js"></script> 
 <script type="text/javascript"> 
 var testBsSuggest = $("#test").bsSuggest({ 
 //url: "/rest/sys/getuserlist?keyword=", 
 url: "data.json", 
 /*effectiveFields: ["userName", "shortAccount"], 
 searchFields: [ "shortAccount"], 
 effectiveFieldsAlias:{userName: "姓名"},*/ 
 idField: "userId", 
 keyField: "userName" 
 }).on('onDataRequestSuccess', function (e, result) { 
 console.log('onDataRequestSuccess: ', result); 
 }).on('onSetSelectValue', function (e, keyword) { 
 console.log('onSetSelectValue: ', keyword); 
 }).on('onUnsetSelectValue', function (e) { 
 console.log("onUnsetSelectValue"); 
 }); 
 
 /** 
 * 不显示下拉按钮 
 */ 
 var testBsSuggest = $("#testNoBtn").bsSuggest({ 
 //url: "/rest/sys/getuserlist?keyword=", 
 url: "data.json", 
 /*effectiveFields: ["userName", "shortAccount"], 
 searchFields: [ "shortAccount"], 
 effectiveFieldsAlias:{userName: "姓名"},*/ 
 showBtn: false, 
 idField: "userId", 
 keyField: "userName" 
 }).on('onDataRequestSuccess', function (e, result) { 
 console.log('onDataRequestSuccess: ', result); 
 }).on('onSetSelectValue', function (e, keyword) { 
 console.log('onSetSelectValue: ', keyword); 
 }).on('onUnsetSelectValue', function (e) { 
 console.log("onUnsetSelectValue"); 
 }); 
 
 /** 
 * 从 data参数中过滤数据 
 */ 
 var testdataBsSuggest = $("#test_data").bsSuggest({ 
 indexId: 2, //data.value 的第几个数据,作为input输入框的内容 
 indexKey: 1, //data.value 的第几个数据,作为input输入框的内容 
 data: { 
  'value':[ 
  {'id':'0','word':'lzw','description':'http://lzw.me'}, 
  {'id':'1','word':'lzwme','description':'http://w.lzw.me'}, 
  {'id':'2','word':'meizu','description':'http://www.meizu.com'}, 
  {'id':'3','word':'flyme','description':'http://flyme.meizu.com'} 
  ], 
  'defaults':'http://lzw.me' 
 } 
 }); 
 /** 
 * 百度搜索 API 测试 
 */ 
 var baiduBsSuggest = $("#baidu").bsSuggest({ 
 allowNoKeyword: false, //是否允许无关键字时请求数据。为 false 则无输入时不执行过滤请求 
 multiWord: true,  //以分隔符号分割的多关键字支持 
 separator: ",",  //多关键字支持时的分隔符,默认为空格 
 getDataMethod: "url", //获取数据的方式,总是从 URL 获取 
 url: 'http://unionsug.baidu.com/su?p=3&t='+ (new Date()).getTime() +'&wd=', /*优先从url ajax 请求 json 帮助数据,注意最后一个参数为关键字请求参数*/ 
 jsonp: 'cb',   //如果从 url 获取数据,并且需要跨域,则该参数必须设置 
 processData: function (json) { // url 获取数据时,对数据的处理,作为 getData 的回调函数 
  var i, len, data = {value: []}; 
  if (!json || !json.s || json.s.length === 0) { 
  return false; 
  } 
 
  console.log(json); 
  len = json.s.length; 
 
  jsonStr = "{'value':["; 
  for (i = 0; i < len; i++) { 
  data.value.push({ 
   word: json.s[i] 
  }); 
  } 
  data.defaults = 'baidu'; 
 
  //字符串转化为 js 对象 
  return data; 
 } 
 }); 
 /** 
 * 淘宝搜索 API 测试 
 */ 
 var taobaoBsSuggest = $("#taobao").bsSuggest({ 
 indexId: 2,  //data.value 的第几个数据,作为input输入框的内容 
 indexKey: 1,  //data.value 的第几个数据,作为input输入框的内容 
 allowNoKeyword: false, //是否允许无关键字时请求数据。为 false 则无输入时不执行过滤请求 
 multiWord: true, //以分隔符号分割的多关键字支持 
 separator: ",",  //多关键字支持时的分隔符,默认为空格 
 getDataMethod: "url", //获取数据的方式,总是从 URL 获取 
 showHeader: true, //显示多个字段的表头 
 effectiveFieldsAlias:{Id: "序号", Keyword: "关键字", Count: "数量"}, 
 url: 'http://suggest.taobao.com/sug?code=utf-8&extras=1&q=', /*优先从url ajax 请求 json 帮助数据,注意最后一个参数为关键字请求参数*/ 
 jsonp: 'callback',  //如果从 url 获取数据,并且需要跨域,则该参数必须设置 
 processData: function(json){ // url 获取数据时,对数据的处理,作为 getData 的回调函数 
  var i, len, data = {value: []}; 
 
  if(!json || !json.result || json.result.length == 0) { 
  return false; 
  } 
 
  console.log(json); 
  len = json.result.length; 
 
  for (i = 0; i < len; i++) { 
  data.value.push({ 
   "Id": (i + 1), 
   "Keyword": json.result[i][0], 
   "Count": json.result[i][1] 
  }); 
  } 
  console.log(data); 
  return data; 
 } 
 }); 
 
 $("form").submit(function(e) { 
 return false; 
 }); 
 </script> 
</body> 
 
</html>

配置参数

参数列表中的值均为插件默认值

{
 url: null,   //请求数据的 URL 地址
 jsonp: null,   //设置此参数名,将开启jsonp功能,否则使用json数据结构
 data: {},   //提示所用的数据
 getDataMethod: "firstByUrl", //获取数据的方式,url:一直从url请求;data:从 options.data 获取;firstByUrl:第一次从Url获取全部数据,之后从options.data获取
 indexId: 0,   //每组数据的第几个数据,作为input输入框的 data-id,设为 -1 且 idField 为空则不设置此值
 indexKey: 0,   //每组数据的第几个数据,作为input输入框的内容
 idField: "",   //每组数据的哪个字段作为 data-id,优先级高于 indexId 设置(推荐)
 keyField: "",   //每组数据的哪个字段作为输入框内容,优先级高于 indexKey 设置(推荐)
 effectiveFields: [],  //有效显示于列表中的字段,非有效字段都会过滤,默认全部,对自定义getData方法无效
 effectiveFieldsAlias: {}, //有效字段的别名对象,用于 header 的显示
 searchFields: [],  //有效搜索字段,从前端搜索过滤数据时使用。effectiveFields 配置字段也会用于搜索过滤
 showHeader: false,  //是否显示选择列表的 header,默认有效字段大于一列时显示,否则不显示
 showBtn: true,   //是否显示下拉按钮
 allowNoKeyword: true,  //是否允许无关键字时请求数据
 multiWord: false,  //以分隔符号分割的多关键字支持
 separator: ",",   //多关键字支持时的分隔符,默认为半角逗号
 processData: processData, //格式化数据的方法,返回数据格式参考 data 参数
 getData: getData,  //获取数据的方法
 autoMinWidth: false,  //是否自动最小宽度,设为 false 则最小宽度不小于输入框宽度
 listAlign: "left",  //提示列表对齐位置,left/right/auto
 inputBgColor: '',  //输入框背景色,当与容器背景色不同时,可能需要该项的配置
 inputWarnColor: "rgba(255,0,0,.1)", //输入框内容不是下拉列表选择时的警告色
 listStyle: {
 "padding-top":0, "max-height": "375px", "max-width": "800px",
 "overflow": "auto", "width": "auto",
 "transition": "0.3s", "-webkit-transition": "0.3s", "-moz-transition": "0.3s", "-o-transition": "0.3s"
 },    //列表的样式控制
 listHoverStyle: 'background: #07d; color:#fff', //提示框列表鼠标悬浮的样式
 listHoverCSS: "jhover",  //提示框列表鼠标悬浮的样式名称
 keyLeft: 37,   //向左方向键
 keyUp: 38,   //向上方向键
 keyRight: 39,   //向右方向键
 keyDown: 40,   //向下方向键
 keyEnter: 13   //回车键
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js change,propertychange,input事件小议
Dec 20 Javascript
给artDialog 5.02 增加ajax get功能详细介绍
Nov 13 Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
Oct 10 Javascript
JS判断不能为空实例代码
Nov 26 Javascript
分享Javascript中最常用的55个经典小技巧
Nov 29 Javascript
jQuery插件datalist实现很好看的input下拉列表
Jul 14 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
Aug 24 Javascript
谈谈jQuery Ajax用法详解
Nov 27 Javascript
在vue项目中引入highcharts图表的方法(详解)
Mar 05 Javascript
javascript实现拖拽碰撞检测
Mar 12 Javascript
Vue的data、computed、watch源码浅谈
Apr 04 Javascript
利用JavaScript为句子加标题的3种方法示例
Jan 05 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
Mar 25 #Javascript
bootstrap suggest搜索建议插件使用详解
Mar 25 #Javascript
JS实现列表页面隔行变色效果
Mar 25 #Javascript
angular仿支付宝密码框输入效果
Mar 25 #Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 #jQuery
axios基本入门用法教程
Mar 25 #Javascript
Bootstrap DateTime Picker日历控件简单应用
Mar 25 #Javascript
You might like
PHP面向对象编程快速入门
2006/10/09 PHP
模仿OSO的论坛(三)
2006/10/09 PHP
解决了Ajax、MySQL 和 Zend Framework 的乱码问题
2009/03/03 PHP
PHP 远程文件管理,可以给表格排序,遍历目录,时间排序
2009/08/07 PHP
PHP命名空间namespace及use的简单用法分析
2018/08/03 PHP
PHP实现的杨辉三角求解算法分析
2019/03/11 PHP
PHP Swoole异步MySQL客户端实现方法示例
2019/10/24 PHP
YUI 读码日记之 YAHOO.lang.is*
2008/03/22 Javascript
javaScript 数值型和字符串型之间的转换
2009/07/25 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
2013/10/14 Javascript
jQuery中removeProp()方法用法实例
2015/01/05 Javascript
JavaScript 事件对象介绍
2015/04/13 Javascript
zTree插件下拉树使用入门教程
2016/04/11 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
BootStrap table表格插件自适应固定表头(超好用)
2016/08/24 Javascript
Angular 理解module和injector,即依赖注入
2016/09/07 Javascript
JavaScript实现垂直滚动条效果
2017/01/18 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
vue插件mescroll.js实现移动端上拉加载和下拉刷新
2019/03/07 Javascript
vue自定义指令和动态路由实现权限控制
2020/08/28 Javascript
简单讲解Python中的数字类型及基本的数学计算
2016/03/11 Python
Python中list初始化方法示例
2016/09/18 Python
python命令行解析之parse_known_args()函数和parse_args()使用区别介绍
2018/01/24 Python
Django User 模块之 AbstractUser 扩展详解
2020/03/11 Python
python3.7添加dlib模块的方法
2020/07/01 Python
python3实现将json对象存入Redis以及数据的导入导出
2020/07/16 Python
德国PC硬件网站:CASEKING
2016/10/20 全球购物
加拿大品牌鞋包连锁店:Little Burgundy
2021/02/28 全球购物
什么是三层交换,说说和路由的区别在那里
2014/09/01 面试题
酒店led欢迎词
2014/01/09 职场文书
新闻传媒系求职信范文
2014/04/19 职场文书
学校领导班子群众路线整改措施
2014/09/16 职场文书
2015年管理人员工作总结
2015/05/13 职场文书
校园安全教育心得体会
2016/01/15 职场文书
电工生产实习心得体会
2016/01/22 职场文书
党风廉政承诺书2016
2016/03/25 职场文书