关于 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 }
)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 这两个参数非常关键
Demo
该演示代码的多选没有删除操作,留给大家一点思考的余地。当然多选的方式不唯一。
See the Pen autocomplete by Zongbin Niu (@nzbin) on CodePen.
关于 devbridge-autocomplete 插件多选操作的实现方法的更多相关文章
- 原生js实现autocomplete插件
在实际的项目中,能用别人写好的插件实现相关功能是最好不过,为了节约时间成本,因为有的项目比较紧急,没充分时间让你自己来写,即便写了,你还要花大量时间调试兼容性.但是出于学习的目的,你可以利用闲暇时间, ...
- Jquery autocomplete插件的使用
简单用法: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEnc ...
- JS实战 · 复选框全选操作
思路: 1.获取被选中checkbox,通过checked属性的状态完成: 2.获取被选中的checkbox的value值: 3.求所有value的和sum: 4.定义span区域存储和sum: ...
- jquery autocomplete插件
jquery autocomplete插件 https://goodies.pixabay.com/jquery/auto-complete/demo.html autocomplete-table ...
- Android在listview添加checkbox实现单选多选操作问题(转)
转自:http://yangshen998.iteye.com/blog/1310183 在Android某些开发需求当中,有时候需要在listveiw中加入checkbox实现单选,多选操作.表面上 ...
- AngularJs 简单实现全选,多选操作
很多时候我们在处理CURD(增删改查)的时候需要实现批量操作数据,这时候就必须使用多选操作. Angular 中实现如下(当然还有很多种比笔者写的更好的方法,这里只是简单的实现.) demo 演示地址 ...
- C#中使用JQueryUI中Autocomplete插件
服务器端后台代码: 1 private string GetModelNames() { 2 return @"[ 3 { 4 'value': 'jquery', 5 'label': ' ...
- GridControl表头全选操作实现之最优方法
突然发现很久没有写博客了. 昨天整了个Windows Live Writer 就为了以后好好写写博客. 所以,开始咯. 为了积累,也为了分享. 之前在博客园中看到一篇文章:<Winform分页控 ...
- ListView多选操作模式详解CHOICE_MODE_MULTIPLE与CHOICE_MODE_MULTIPLE_MODAL
这篇文章我们将详细的介绍如何实现ListView的多选操作,文中将会纠正在使用ListViewCHOICE_MODE_MULTIPLE或者CHOICE_MODE_MULTIPLE_MODAL时容易犯的 ...
随机推荐
- 7.让网站支持http和https的访问方式
平台之大势何人能挡? 带着你的Net飞奔吧!:http://www.cnblogs.com/dunitian/p/4822808.html#iis 怎么让网站在本地支持SSL?http://www.c ...
- 利用CSS中的:after、: before制作的边三角提示框
小颖昨天分享了一篇参考bootstrap中的popover.js的css画消息弹框今天给大家再分享一篇使用:before和:after伪元素画消息弹框的CSS. 画出来是介个酱紫的: 有没有觉得画的萌 ...
- 11、Struts2 的文件上传和下载
文件上传 表单准备 要想使用 HTML 表单上传一个或多个文件 须把 HTML 表单的 enctype 属性设置为 multipart/form-data 须把 HTML 表单的method 属性设置 ...
- gitHub使用入门和github for windows的安装教程
在看这篇教程之前我想大家也在搜索怎样使用gitHub托管自己的项目,在使用gitHub之前我也遇到过各种问题,在网上我也搜索了很多,但总觉得网上搜索到的东西很多很杂,有的根本不知道是在表达什么.在这过 ...
- Mysql命令大全
格式: mysql -h主机地址 -u用户名 -p用户密码 1.连接到本机上的MYSQL.首先打开DOS窗口,然后进入目录mysql\bin,再键入命令mysql -u root -p,回车后提示你输 ...
- Spark踩坑记——数据库(Hbase+Mysql)
[TOC] 前言 在使用Spark Streaming的过程中对于计算产生结果的进行持久化时,我们往往需要操作数据库,去统计或者改变一些值.最近一个实时消费者处理任务,在使用spark streami ...
- Python爬虫小白入门(四)PhatomJS+Selenium第一篇
一.前言 在上一篇博文中,我们的爬虫面临着一个问题,在爬取Unsplash网站的时候,由于网站是下拉刷新,并没有分页.所以不能够通过页码获取页面的url来分别发送网络请求.我也尝试了其他方式,比如下拉 ...
- Android MVP+Retrofit+RxJava实践小结
关于MVP.Retrofit.RxJava,之前已经分别做了分享,如果您还没有阅读过,可以猛戳: 1.Android MVP 实例 2.Android Retrofit 2.0使用 3.RxJava ...
- 在将 varchar 值 'xinpian' 转换成数据类型 int 时失败?
把int类型的值修改为varchar类型的值
- mysql-5.6.34 Installation from Source code
Took me a while to suffer from the first successful souce code installation of mysql-5.6.34. Just pu ...