关于 devbridge-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 }
  • lookupFilterfunction (suggestion, query, queryLowerCase) {} 本地数据查询的过滤函数
  • lookupLimit:查询条数限制,默认值:no limit
  • onSelectfunction (suggestion) {} ,用户选择查询结果后的毁掉函数
  • minChars:触发提示的最小单词数,默认值:1
  • maxHeight:提示列表容器的最大高度,默认值:300
  • deferRequestBy:延迟Ajax请求的毫秒数,默认值:0
  • width:提示容器的宽度,默认值:auto
  • params:参数传递的请求,可选
  • formatResultfunction (suggestion, currentValue) {}
  • delimiter:字符串或正则表达式,分割输入值并将最后一个作为查询词,一般逗号分割
  • zIndex:提示容器的z-index值,默认值:9999
  • type:获取提示的 Ajax 请求方式,默认值:get
  • noCache:是否缓存提示结果,默认值:false
  • onSearchStartfunction (query) {}
  • onSearchCompletefunction (query, suggestions) {}
  • onSearchErrorfunction (query, jqXHR, textStatus, errorThrown) {}
  • onInvalidateSelectionfunction () {},选择提示结果后,如果input的值发生变化则调用函数
  • triggerSelectOnValidInput:如果匹配查询,只要聚焦 input 就触发 onSelect 函数,默认值:true
  • preventBadQueries:默认值:true
  • beforeRenderfunction (container) {} 在展示查询结果之前调用函数
  • tabDisabled:默认值:false
  • paramName:默认值:'query'
  • transformResultfunction(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.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏与神兽党一起成长

将JSON对象格式化输出(上篇)

(这后面的内容不用看了) 最近在使用Node.js开发项目,由于JavaScript内置了对JSON的支持,自然而然想到了使用JSON编写配置文件。

42730
来自专栏salesforce零基础学习

salesforce lightning零基础学习(三) 表达式的!(绑定表达式)与 #(非绑定表达式)

在salesforce的classic中,我们使用{!expresion}在前台页面展示信息,在lightning中,上一篇我们也提及了,如果展示attribu...

12700
来自专栏葡萄城控件技术团队

1000多个项目中的十大JavaScript错误以及如何避免

通过统计数据库中的1000多个项目,我们发现在 JavaScript 中最常出现的错误有10个。下面会向大家介绍这些错误发生的原因以及如何防止。 对于这些错误发...

38240
来自专栏九彩拼盘的叨叨叨

在 Sublime 中使用 Vim 指南

Sublime 中自带支持 Vim 的插件,但默认是关闭的。开启方式为:在菜单 Preferences/Settings-User 中设置

10320
来自专栏前端架构

再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

ng-bind 单向数据绑定($scope -> view),用于数据显示,简写形式是 {{}}。

21430
来自专栏禅林阆苑

vim按键整理 【原创】

vim按键整理 Write By CS逍遥剑仙 我的主页: www.csxiaoyao.com GitHub: github.com/csxi...

361100
来自专栏优启梦

Chrome控制台console的基本用法

大家都有用过各种类型的浏览器,每种浏览器都有自己的特色,本人拙见,在我用过的浏览器当中,我是最喜欢Chrome的,因为它对于调试脚本及前端设计调试都有它比其它浏...

472120
来自专栏蓝天

Shell 条件判断汇总

-b file            若文件存在且是一个块特殊文件,则为真 -c file            若文件存在且是一个字符特殊文件,则为真 -d ...

9120
来自专栏Python

详细解读Jquery各Ajax函数:$.get(),$.post(),$.ajax(),$.getJSON()

一,$.get(url,[data],[callback]) 说明:url为请求地址,data为请求数据的列表(是可选的,也可以将要传的参数写在url里面),c...

337100
来自专栏Youngxj

Chrome控制台console的基本用法

21950

扫码关注云+社区

领取腾讯云代金券