关于 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.
- 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 数组属性和方法
- kubernetes用户安全管理模型简析
- Unity3D网络通讯(一)--Asp.Net Core WebApi创建发布注意事项
- Unity3D网络通讯(二)--UnityWebRequest及JsonUtility请求Http Restful
- CS学习笔记 | 20、通过Socks转发的方法
- 构建的抽象
- 低成本个人建站系列二 —— 使用 Hexo+GitHub 搭建个人免费博客
- 42图揭秘,「后端技术学些啥」
- R-ggTimeSeries | ggplot2: 热力日历图
- R-wordcloud: 词云图
- 直播APP源码是如何实现音视频同步的
- 动态规划算法练习(5)--medium
- phpstudy漏洞分析原因到修复
- 哈?命令注入外带数据的姿势还可以这么骚?
- 记一次曲折的RCE挖掘
- pytest文档49-命令行参数--tb的使用