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

前端之家收集整理的这篇文章主要介绍了基于bootstrap按钮式下拉菜单组件的搜索建议插件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

<Meta charset="utf-8"> Bootstrap <a href="https://www.jb51.cc/tag/sousuo/" target="_blank" class="keywords">搜索</a>建议<a href="https://www.jb51.cc/tag/chajian/" target="_blank" class="keywords">插件</a> <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"> nofollow" rel="stylesheet">
bootstrap comBox 搜索建议插件

这是一个基于 bootstrap 按钮式下拉菜单组件的搜索建议插件.

使用说明:

测试(URL 获取)

配置了 data-id,非下拉菜单选择输入则背景色警告。

测试(URL 获取)

不展示下拉菜单按钮。

测试(json 数据中获取)

默认启用空关键字检索。

百度搜索

支持逗号分隔多关键字

淘宝搜索

支持逗号分隔多关键字

配置参数

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

功能,否则使用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,.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 //回车键 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/bootstrap/40451.html
下拉菜单下拉菜单搜索建议插件

猜你在找的Bootstrap相关文章