bootstrap-suggest使用记录

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

效果如下：

个人觉得该插件还是比较好用，API较为齐全。不需要自己写过多的代码。
下载地址：//download.csdn.net/download/lasi1222/11990431
好像需要积分下载，如果不想花积分就留言我发给你。
使用方式如下：
引入依赖

 <script th:src="@{/ajax/libs/suggest/bootstrap-suggest.min.js}"></script>

页面使用 HTML代码如下：

     <div class="form-group"><label class="col-sm-3 control-label"><span style="color: red; ">*</span>所属项目：</label><div class="col-sm-8"><div class="input-group"><input id="projectName" name="projectName" class="form-control" type="text"autocomplete="off"><input id="projectId" name="projectId" class="form-control" type="hidden"autocomplete="off"><div class="input-group-btn"><button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button><ul class="dropdown-menu dropdown-menu-right" role="menu"></ul></div></div></div></div>

其中projectName 用于展示回显内容,projectId用于存选中id

js代码如下：其中回调方法自己看下就知道了

 $("#projectName").bsSuggest({url: prefix + "/queryProjectsModel",//直接通过url查询后台数据idField: "projectId",keyField: "projectName",ignorecase: true,hideOnSelect:true,effectiveFields:["projectName","projectCode"],effectiveFieldsAlias:{projectName: "项目名",projectCode:"编号"}}).on('onDataRequestSuccess', function (e, result) {}).on('onSetSelectValue', function (e, selectedData, selectedData) {$("#projectId").val(selectedData.projectId);}).on('onUnsetSelectValue', function (e) {$("#projectId").val('');});

后台代码如下：

 /*** 查询所有项目* @return*/@GetMapping("/queryProjectsModel")@ResponseBodypublic AjaxResult userModel(){AjaxResult ajax = new AjaxResult();Project whereVo = new Project();whereVo.setDr(0);List<Project> projects = projectService.selectProjectList(whereVo);ajax.put("code", 200);ajax.put("value", projects);return ajax;}

API使用如下

属性	默认值	描述
url	null	请求数据的 URL 地址
jsonp	null	设置此参数名，将开启jsonp功能，否则使用json数据结构
data	[]	提示所用的数据，注意格式
indexId	0	每组数据的第几个数据，作为input输入框的 data-id，设为 -1 且 idField 为空则不设置此值
indexKey	0	每组数据的第几个数据，作为input输入框的内容
idField	''	每组数据的哪个字段作为 data-id，优先级高于 indexId 设置（推荐）
keyField	''	每组数据的哪个字段作为输入框内容，优先级高于 indexKey 设置（推荐）
autoSelect	true	键盘向上/下方向键时，是否自动选择值
allowNoKeyword	TRUE	是否允许无关键字时请求数据
getDataMethod	'firstByUrl'	获取数据的方式，url：一直从url请求；data：从 options.data 获取；firstByUrl：第一次从Url获取全部数据，之后从options.data获取
delayUntilKeyup	false	获取数据的方式为 firstByUrl 时，是否延迟到有输入时才请求数据
ignorecase	false	前端搜索匹配时，是否忽略大小写
effectiveFields	[]	有效显示于列表中的字段，非有效字段都会过滤，默认全部有效
effectiveFieldsAlias	{}	有效字段的别名对象，用于 header 的显示
searchFields	[]	有效搜索字段，从前端搜索过滤数据时使用，但不一定显示在列表中。effectiveFields 配置字段也会用于搜索过滤
twoWayMatch	true	是否双向匹配搜索。为 true 即输入关键字包含或包含于匹配字段均认为匹配成功，为 false 则输入关键字包含于匹配字段认为匹配成功
multiWord	false	以分隔符号分割的多关键字支持
separator	','	多关键字支持时的分隔符，默认为半角逗号
delay	300	搜索触发的延时时间间隔，单位毫秒
emptyTip	''	查询为空时显示的内容，可为 html
searchingTip	'搜索中...'	ajax 搜索时显示的提示内容，当搜索时间较长时给出正在搜索的提示
hideOnSelect	false	鼠标从列表单击选择了值时，是否隐藏选择列表
autoDropup	false	选择菜单是否自动判断向上展开。设为 true，则当下拉菜单高度超过窗体，且向上方向不会被窗体覆盖，则选择菜单向上弹出
autoMinWidth	false	是否自动最小宽度，设为 false 则最小宽度不小于输入框宽度
showHeader	false	是否显示选择列表的 header。为 true 时，有效字段大于一列则显示表头
showBtn	true	是否显示下拉按钮
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' }
listAlign	'left'	提示列表对齐位置，left/right/auto
listHoverStyle	'background: #07d; color:#fff'	提示框列表鼠标悬浮的样式
listHoverCSS	'jhover'	提示框列表鼠标悬浮的样式名称
clearable	false	是否可清除已输入的内容
keyLeft	37	向左方向键，不同的操作系统可能会有差别，则自行定义
keyUp	38	向上方向键
keyRight	39	向右方向键
keyDown	40	向下方向键
keyEnter	13	回车键
fnProcessData	processData	格式化数据的方法，返回数据格式参考 data 参数
fnGetData	getData	获取数据的方法，无特殊需求一般不作设置
fnAdjustAjaxParam	null	调整 ajax 请求参数方法，用于更多的请求配置需求。如对请求关键字作进一步处理、修改超时时间等
fnPreprocessKeyword	null	搜索过滤数据前，对输入关键字作进一步处理方法。注意，应返回字符串

bootstrap-suggest使用记录相关推荐

Bootstrap笔记（记录不会的知识）
head: <link rel="stylesheet" href="bootstrap.min.css" /> 引入bootstrap.min.c ...
Bootstrap Metronic 学习记录（一）简介
1.简介是一个基于Bootstrap 3.x的高级管理控制面板主题.Bootstrap Metronic - 是一个完全响应式管理模板.基于Bootstrap3框架.高度可定制的,易于使用.适合从小 ...
Bootstrap Metronic 学习记录（一）简介
1.简介是一个基于Bootstrap 3.x的高级管理控制面板主题.Bootstrap Metronic - 是一个完全响应式管理模板.基于Bootstrap3框架.高度可定制的,易于使用.适合从小 ...
bootstrap suggest的用法
官网 https://github.com/lzwme/bootstrap-suggest-plugin 1.引入js文件2.js脚本 <script th:inline="java ...
mysql如何管理innodb元数据_MySQL 8 InnoDB 集群管理
使用 dba.checkInstanceConfiguration() 在添加实例到集群中前,使用该方法检查实例配置是否满足InnoDB 集群要求. 使用 dba.configureLocalInst ...
经典故障：四个雷，3*2*2*3种随机方法的特殊恢复案例
墨墨导读:恢复专家前辈给我们精心准备了个故障,埋了四个雷,整个恢复过程感觉像是过山车,整理分享至此,希望对大家有帮助. 恢复文件就给一个压缩的system,起库. 恢复过程首先,获取system文 ...
Java 14 有哪些新特性？
记录为 Java 提供了一种正确实现数据类的能力,不再需要为实现数据类而编写冗长的代码.下面就来看看 Java 14 中的记录有哪些新特性. 作者 | Nathan Esquenazi 译者 | 明明 ...
Bootstrap4动态切换主题
bootstrap4有个网站叫做bootswatch,其中已经设计了一些很美的主题: 要想使用也是很简单的,只需要下载其中的bootstrap.css或者bootstrap.min.css并覆盖到自己 ...
IDEA中MyBatis Migrations Maven plugin 使用总结
MyBatis/migrations-maven-plugin( 下载地址下文简称migrations)是一个开源的用于DB版本控制的命令行插件,Migrations通过生成统一格式的DDL脚本模板. ...
oracle如何使用system,【千里之行始于足下】谈Oracle的system表空间
编辑手记:SYSTEM表空间是Oracle数据库最重要的表空间,在创建数据库时被最先创建,其中包含了数据库的元数据,对于数据库来说生死攸关.对于很多初学者,全面了解system表空间就格外重要. 系统 ...

bootstrap-suggest使用记录

bootstrap-suggest使用记录相关推荐

最新文章

热门文章