首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

基于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   //回车键
}

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

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

- Author -

风雨果果

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
转一个日期输入控件，支持FF
Apr 27 Javascript
javascript 面向对象编程 万物皆对象
Sep 17 Javascript
两个select之间option的互相添加操作(jquery实现)
Nov 12 Javascript
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
Nov 28 Javascript
event.X和event.clientX的区别分析
Oct 06 Javascript
用JQuery在网页中实现分隔条功能的代码
Aug 09 Javascript
web基于浏览器的本地存储方法应用
Nov 27 Javascript
jquery next nextAll nextUntil siblings的区别介绍
Oct 05 Javascript
jQuery 仿百度输入标签插件附效果图
Jul 04 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
Mar 03 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
Feb 22 Javascript
vue动态绑定style样式
Apr 20 Vue.js
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
阿里云(6) 速龙(1) Tomcat(18) 分析统计(1) 排名(1) 数据同步(1) redis shake(1) ipad(1) i5 10400(1) 窗口函数(3)
You might like
资料注册后发信小技巧
2006/10/09 PHP
用PHP和ACCESS写聊天室(九)
2006/10/09 PHP
php下实现一个阿拉伯数字转中文数字的函数
2008/07/10 PHP
PHP提示Notice: Undefined variable的解决办法
2012/11/24 PHP
php 模拟 asp.net webFrom 按钮提交事件实例
2014/10/13 PHP
php 中htmlentities导致中文无法查询问题
2018/09/10 PHP
javascript 按键事件(兼容各浏览器)
2013/12/20 Javascript
JavaScript验证18位身份证号码最后一位正确性的实现代码
2014/08/07 Javascript
jQuery中appendTo()方法用法实例
2015/01/08 Javascript
浅谈js中的闭包
2015/03/16 Javascript
JavaScript几种数组去掉重复值的方法推荐
2016/04/12 Javascript
最丑的时钟效果！js canvas时钟制作方法
2016/08/15 Javascript
vue动态生成dom并且自动绑定事件
2017/04/19 Javascript
vue实现点击当前标签高亮效果【推荐】
2018/06/22 Javascript
vue使用监听实现全选反选功能
2018/07/06 Javascript
微信小程序实现点击空白隐藏的方法示例
2019/08/13 Javascript
使用vuex存储用户信息到localStorage的实例
2019/11/11 Javascript
JavaScript中的Proxy对象
2020/11/27 Javascript
Python写的服务监控程序实例
2015/01/31 Python
Python装饰器用法实例总结
2018/02/07 Python
详谈在flask中使用jsonify和json.dumps的区别
2018/03/26 Python
详解flask入门模板引擎
2018/07/18 Python
Python实现定时执行任务的三种方式简单示例
2019/03/30 Python
Python当中的array数组对象实例详解
2019/06/12 Python
python集合常见运算案例解析
2019/10/17 Python
python有序查找算法 二分法实例解析
2020/02/18 Python
python GUI库图形界面开发之PyQt5切换按钮控件QPushButton详细使用方法与实例
2020/02/28 Python
django实现将后台model对象转换成json对象并传递给前端jquery
2020/03/16 Python
深入了解NumPy 高级索引
2020/07/24 Python
Scrapy中如何向Spider传入参数的方法实现
2020/09/28 Python
使用HTML5做个画图板的方法介绍
2013/05/03 HTML / CSS
高中生毕业学习总结的自我评价
2013/11/14 职场文书
学习朴航瑛老师爱岗敬业先进事迹思想汇报
2014/09/17 职场文书
小学生毕业评语
2014/12/26 职场文书
银行先进个人总结
2015/02/15 职场文书
MySQL常用慢查询分析工具详解
2022/08/14 MySQL