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

2024-11-30 20:07:28

本文实例为大家分享了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布局组件教程之Bootstrap下拉菜单

本章将重点介绍 Bootstrap 下拉菜单.下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.这可以通过与下拉菜单(Dropdown) JavaScript 插件的互动来实现. 如需使用下列菜单,只需要在 class .dropdown 内加上下拉菜单即可.下面的实例演示了基本的下拉菜单: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 下拉菜单(Dropdowns)</title>
bootstrap组件之按钮式下拉菜单小结

1.单按钮下拉菜单基础的下拉菜单最外层是.dropdown的div 现在只需要改成.btnd-group的div就可以实现单按钮的下拉菜单 <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Action <span class=
Bootstrap CSS组件之按钮下拉菜单

按钮下拉菜单结合使用.btn-group(btn-group-lg/btn-group-sm/btn-group-xs) .dropup .btn .dropdown-menu 按钮下拉菜单是在普通的下拉菜单的基础上封装了.btn样式得效果,就类似于单击一个button按钮,然后显示隐藏的下拉菜单. 组合式下拉菜单分离式下拉菜单向上弹起的下拉菜单 //源码,css实现方式主要是设置.dropdown-menu样式容器的bottom为100% .dropup .dropdown-menu,
Bootstrap CSS组件之下拉菜单(dropdown)

Bootstrap下拉菜单,常用在开发项目中,今天为大家介绍介绍 dropdown.dropdown-menu.dropdown-header.divider.dropdown-submenu 例子见下拉菜单.html //源码 .dropup, .dropdown { position: relative; } .dropdown-toggle:focus { outline: 0; } .dropdown-menu { position: absolute; top: 100%; left:
JS组件Bootstrap ContextMenu右键菜单使用方法

今天来总结下bootstrap的一个小组件的应用.好了,不说废话,进入正题吧. 一.ContextMenu介绍一个需求:表格行调序,支持多选调序,并且可以不连续多选.什么意思呢?先来看看需要实现的效果图: 需求是:需要将选中的6.8.9行移动到第2行和第3行之间.撇开业务不说,单纯从技术层面来说,要想使用最少操作达到上述效果,博主想到了右键功能,如果能够在第2行或者第3行上面点击鼠标右键,通过右键菜单功能将选中的行移动到相应的位置,这样是不是最简单呢.说做咱就做,于是找组件,搜索"bootst
Bootstrap基本组件学习笔记之下拉菜单(7)

对于一些较为常用的功能模块,Bootstrap也进行了封装.包括下拉菜单.按钮组.导航.分页.缩略图.进度条等. 下面先总结下下拉菜单的使用. 直接看下面的例子: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w
Bootstrap按钮下拉菜单组件详解

按钮组也是一个独立的组件,按钮组和下拉菜单组件一样,需要依赖于button.js插件才能正常运作. 把一组<div class="btn-group">组合进一个<div class="btn-toolbar">做成更复杂的组件. <div class="btn-toolbar" role="toolbar"> <div class="btn-group">
JS树形菜单组件Bootstrap TreeView使用方法详解

简要介绍: 之前手头的一个项目需要去做一个左侧的树形菜单,右侧则是一个整体的iframe,从而构成一个整体的网站.一开始是打算用bootstrap的tree-view插件,直接把菜单的数据传过去就好了,结果后来项目又改了需求,菜单的内容和图表都是后台动态生成的,所以只能放弃使用bootstrap插件,自己着手写了一个树形菜单.本文主要分两部分讲,一个是对于bootstrap的treeview的实践,另一部分是介绍自己写的树形菜单. bootstrap-treeview: 组件介绍:http://
学习Bootstrap组件之下拉菜单

Bootstrap 是由Twitter 工程师推出的基于HTML,CSS,JAVASCRIPT的简洁灵活的流行前端框架,我们可以把它想象成一个定义了很多效果的CSS与JS的库,库里面已经定义好了各种组件的显示效果与动画. .dropdown--设置父元素为下拉菜单组件,向下弹出子菜单: .dropup--设置父元素为下拉菜单组件,向上弹出子菜单: .dropdown-toggle--设置按钮为下拉菜单切换按钮: .dropdown-menu--设置ul元素为下拉菜单: .dropdown-men
JS组件Bootstrap实现下拉菜单效果代码

Bootstrap 下拉菜单这一章讲解了下拉菜单,但是没有涉及到交互部分,本章将具体讲解下拉菜单的交互.使用下拉菜单(Dropdown)插件,您可以向任何组件(比如导航栏.标签页.胶囊式导航菜单.按钮等)添加下拉菜单. 如果您想要单独引用该插件的功能,那么您需要引用 dropdown.js.或者,正如 Bootstrap 插件概览一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js. 一.用法您可以切换下拉菜单(Dropdown)插件的隐藏内容:
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例

本文实例讲述了Bootstrap组件之下拉菜单,多级菜单及按钮布局方法.分享给大家供大家参考,具体如下: 下拉菜单菜单: ,dropdown(.dropup改变这个是上显示) data-toggle="dropdown" (激活文本处) .dropdown-menu .pull-left .pull-right 按钮组:.btn-group(各种类为btn的标签集合) .btn-toolbar(按钮导航条) .btn-group-vertical .
Bootstrap组件(一)之菜单

Glyphicons字体图标基类.glyphicon {position/top/display/font-family/} 具体类 {content} --表现在伪元素上使用要点:a.基类+具体类 b.一般图标和文本之间添加一个空格注意点:a.不要和其他组件混用,单独使用一个标签,一般使用span,e.g.:<span class="glyphicon glyphicon-search"></span> b.已使用字体图标类的标签不要再嵌套元素或包含文本

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

相关推荐

随机推荐