关于 devbridge-autocomplete 插件多选操作的实现方法
时间:2022-04-22
本文章向大家介绍关于 devbridge-autocomplete 插件多选操作的实现方法,主要内容包括先看一下autocomplete的参数、示例演示、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
目前据我所知最好用的 autocomplete 插件就是 jquery-ui 的 autocomplete 以及 devbridge 的 autocomplete 插件。
我最终选择了 devbridge 的 autocomplete 插件,主要是不想引用 jquery-ui 的 css 文件。
官方网址:https://www.devbridge.com/sourcery/components/jquery-autocomplete/
先看一下autocomplete的参数
-
serviceUrl
:服务器端的URL或者是返回 Url 字符串的回调函数 -
ajaxSettings
:jQuery Ajax 请求的额外配置 -
lookup
:查询的数据列表。字符串数组或者对象字面量(格式{ value: 'string', data: any }
) -
lookupFilter
:function (suggestion, query, queryLowerCase) {}
本地数据查询的过滤函数 -
lookupLimit
:查询条数限制,默认值:no limit
-
onSelect
:function (suggestion) {}
,用户选择查询结果后的毁掉函数 -
minChars
:触发提示的最小单词数,默认值:1
-
maxHeight
:提示列表容器的最大高度,默认值:300
-
deferRequestBy
:延迟Ajax请求的毫秒数,默认值:0
-
width
:提示容器的宽度,默认值:auto
-
params
:参数传递的请求,可选 -
formatResult
:function (suggestion, currentValue) {}
-
delimiter
:字符串或正则表达式,分割输入值并将最后一个作为查询词,一般逗号分割 -
zIndex
:提示容器的z-index值,默认值:9999
-
type
:获取提示的 Ajax 请求方式,默认值:get
-
noCache
:是否缓存提示结果,默认值:false
-
onSearchStart
:function (query) {}
-
onSearchComplete
:function (query, suggestions) {}
-
onSearchError
:function (query, jqXHR, textStatus, errorThrown) {}
-
onInvalidateSelection
:function () {}
,选择提示结果后,如果input的值发生变化则调用函数 -
triggerSelectOnValidInput
:如果匹配查询,只要聚焦 input 就触发 onSelect 函数,默认值:true
-
preventBadQueries
:默认值:true
-
beforeRender
:function (container) {}
在展示查询结果之前调用函数 -
tabDisabled
:默认值:false
-
paramName
:默认值:'query'
-
transformResult
:function(response, originalQuery) {}
-
autoSelectFirst
:是否自动填充查询列表的第一项,默认值:false
-
appendTo
:查询列表容器被添加到那个元素中,默认值:document.body
-
dataType
:服务器返回的数据格式 -
showNoSuggestionNotice
:如果查询结果为空是否有提示语,默认值:false
-
noSuggestionNotice
:提示语,默认值:No results
-
forceFixPosition
:默认值:false
-
orientation
:提示容器的垂直位置,默认值:'bottom'
,可选值'top','auto'
-
groupBy
:提示数据对象的属性值
配置参数很多,但是有用的可能就几个。
实现多选的关键参数是 delimiter
, onInvalidateSelection
, triggerSelectOnValidInput
实际项目中autocomplete的难点在于需要查询结果的索引值并保存到隐藏域中,所以 onInvalidateSelection
,triggerSelectOnValidInput
这两个参数非常关键
示例演示
该演示代码的多选没有删除操作,留给大家一点思考的余地。当然多选的方式不唯一。
See the Pen autocomplete by Zongbin (@nzbin) on CodePen.
- 数据库中间件 Sharding-JDBC 源码分析 —— 事务(一)之BED
- 熔断器 Hystrix 源码解析 —— 命令执行(二)之执行隔离策略
- phalapi-入门篇4(国际化高可用和自动生成文档)
- 用JavaScript动态输出的JS脚本不能执行
- Dubbo源码解析 —— 服务暴露原理
- [Golang软件推荐] RSA公私钥加解密(解决Golang私钥加密公钥解密问题)
- [喵咪大数据]Hive+Hbase关联
- 再战子域共享Cookie问题
- [喵咪大数据]Presto查询引擎
- 如何在5分钟内做出你的第一个开源贡献
- [喵咪大数据]HUE大数据管理工具
- Dubbo源码解析 —— Zookeeper 订阅
- 注册中心 Eureka 源码解析 —— 项目结构简介
- 【平台】Seldon.io发布新开源平台,用于Kubernetes上的机器学习
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PHP木马免杀的一些总结
- PHP基础之面向对象篇
- PHP变量覆盖漏洞小结
- 算法复习 : 插入排序原理,记忆,时间复杂度 (7行java实现)
- PHP代码审计01之in_array()函数缺陷
- 分治思想 : 并归排序与其时间复杂度
- java Spring系列之 配置文件的操作 +Bean的生命周期+不同数据类型的注入简析+注入的原理详解+配置文件中不同标签体的使用方式
- 算法系列1 初识算法 算法复杂性模型 算法复杂度的计算
- 树莓派基础实验32:DS1302实时时钟模块实验
- Failed to parse date ["1534467411000"]:Invalid time zone indicator '0'
- 快速排序 : 调优:3亿数据40秒,2亿数据30秒,1亿数据15秒
- Spring系列之新注解配置+Spring集成junit+注解注入
- Spring系列之aAOP AOP是什么?+xml方式实现aop+注解方式实现aop
- 线上工程启动日志不滚动了——通过查看堆栈信息排查的过程(ES批量插入)
- Java中使用方法的注意事项