jquery.select2 模糊查询
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/bootstrap-table.css" />
<link rel="stylesheet" type="text/css" href="css/select2.min.css"/>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<script src="js/select2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/zh-CN.js" type="text/javascript" charset="utf-8"></script>
<title></title>
<script>
$(function(){
$("#demo").select2({
theme: "classic",
tags: true,
width:"200" ,
maximumSelectionLength: 1
});
});
</script>
</head>
<body>
<p>
<!--<input type="text" class="select2-container select2-container--classic select2-container--open" name="" id="" value="" />-->
<select id="demo" class="js-example-theme-multiple js-states form-control select2-hidden-accessible" multiple="" tabindex="-1" aria-hidden="true">
<optgroup label="Alaskan/Hawaiian Time Zone">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone">
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</optgroup>
<optgroup label="Mountain Time Zone">
<option value="AZ">Arizona</option>
<option value="CO">Colorado</option>
<option value="ID">Idaho</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
</optgroup>
<optgroup label="Eastern Time Zone">
<option value="SC">South Carolina</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WV">West Virginia</option>
</optgroup>
</select>
</p>
</body>
</html>
//可以自己修改样式
|
具体参数可以参考一下： 参数 |
类型 |
描述 |
|
Width |
字符串 |
控制 宽度 样式属性的Select2容器div |
|
minimumInputLength |
int |
最小数量的字符 |
|
maximumInputLength |
int |
最大数量的字符 |
|
minimumResultsForSearch |
Int |
最小数量的结果 |
|
maximumSelectionSize |
int |
可选择的最大条目数 |
|
placeholder |
字符串 |
选择初始值 |
|
separator |
字符串 |
分隔符字符或字符串用来划定id |
|
allowClear |
布尔 |
此选项只指定占位符 |
|
multiple |
布尔 |
Select2是否允许选择多个值 |
|
openOnEnter |
打开下拉如果设置为true,当用户按下回车键,Select2关闭。 默认情况下启用这个选项。 |
|
|
id |
函数 |
函数用于获取id从选择对象或字符串id存储代表的关键 |
|
matcher |
函数 |
用于确定是否搜索词匹配一个选项时使用一个内置的查询功能 |
|
sortResults |
函数 |
用于排序列表搜索之前显示的结果。 |
|
formatSelection |
函数 |
函数用于呈现当前的选择 |
|
formatResult |
函数 |
函数用来渲染结果, |
|
formatResultCssClass |
函数 |
函数用于添加css类结果元素 |
|
formatNoMatches |
字符串/函数 |
字符串包含“不匹配”消息,或 |
|
formatSearching |
字符串/函数 |
字符串包含“搜索… “消息,或 |
|
formatAjaxError |
字符串/函数 |
字符串包含消息“加载失败”,或 |
|
formatInputTooShort |
字符串/函数 |
包含“搜索”输入太短消息的字符串,或 |
|
formatInputTooLong |
字符串/函数 |
包含“搜索”输入太短消息的字符串,或 |
|
formatInputTooLong |
字符串/函数 |
包含“搜索输入字符串太长”消息,或 |
|
formatSelectionTooBig |
字符串/函数 |
字符串包含“你不能选择任何更多的选择”消息,或 |
|
formatLoadMore |
字符串/函数 |
字符串/函数 |
|
createSearchChoice |
函数 |
创建一个新的可选选择从用户的搜索词。 允许创建通过查询选择不可用 功能。 有用的用户可以创建动态的选择时,如“标签”usecase。 |
|
createSearchChoicePosition |
函数/字符串 |
定义的位置插入元素 |
|
initSelection |
函数 |
调用Select2创建允许用户初始化选择的值 select2附加到元素 |
|
tokenizer |
函数 |
记号赋予器函数可以处理后输入搜索框的输入每一个按键和提取 并选择选择。 |
|
tokenSeparators |
函数 |
一个字符串数组定义标记为默认的分隔符 分词器功能。 默认情况下,此选项设置为一个空数组标记这意味着使用默认 编译器是禁用的。 通常是明智的,设置该选项值相似 [',',' '] 。 |
|
query |
函数 |
函数用于搜索词的查询结果。 |
|
ajax |
对象 |
选择内置的ajax查询功能。 这个对象作为快捷方式有手动编写一个函数,执行ajax请求。 内置函数支持更高级的特性,比如节流和无序的反应。 |
|
data |
数组/对象 |
择建在查询功能,使用数组。 |
|
tags |
数组/函数 |
将Select2放入“标签'mode,用户可以添加新的选择和预先存在的标签是通过提供 这个选项的属性是一个 数组 或者一个 函数 返回一个 数组的 对象 或 字符串 。 如果 字符串 而不是使用 对象 他们将有一个被转换成一个对象 id 和 文本 属性相等 的值 字符串 。 |
|
containerCss |
函数/对象 |
内联css将被添加到select2的容器。 一个对象包含css属性/值密钥对或一个函数,这个函数返回一个对象。 |
|
containerCssClass |
函数/字符串 |
Css类将被添加到select2容器的标签。 |
|
dropdownCss |
函数/对象 |
内联css将被添加到select2下拉的容器。 一个对象包含css属性/值密钥对或一个函数,这个函数返回一个对象。 |
|
dropdownCssClass |
函数/字符串 |
Css类将被添加到select2下拉的容器。 |
|
dropdownAutoWidth |
布尔 |
当设置为 真正的 尝试自动尺寸下拉基于内容的宽度。 |
|
adaptContainerCssClass |
函数 |
过滤器/重命名的css类,因为他们被复制从源标签select2容器标签 |
|
adaptDropdownCssClass |
函数 |
滤器/重命名的css类,因为他们被复制从源标签select2拉标签 |
|
escapeMarkup |
函数 |
函数用于后处理标记从格式化程序返回功能。 默认情况下这个功能转义的html实体,以防止javascript注入。 |
|
selectOnBlur |
布尔 |
设置为 真正的 如果你想要Select2选择当前高亮选项时模糊。 |
|
loadMorePadding |
整数 |
定义了多少像素需要加载下一页前折以下。 默认值是 0 这意味着结果列表需要滚动到下一个页面的底部加载的结果。 这个选项可以用来触发加载更快,可能导致更流畅的用户体验。 |
|
nextSearchTerm |
函数 |
函数用于确定下一个搜索词应该是什么 |
http://select2.github.io/examples.html#tags
jquery.select2 模糊查询的更多相关文章
- jquery.autocomplete 模糊查询 支持分组
//demo <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <lin ...
- select2 模糊查询远程数据
详细:http://www.cnblogs.com/linJie1930906722/p/6060370.html $("#name").select2({ language: & ...
- jquery.tagsinput的使用例子，包括模糊查询后端代码
<link rel="stylesheet" type="text/css" href="~/lib/jquery.tagsinput.jurg ...
- select2 智能补全模糊查询select2的下拉选择框使用
我们在上篇文章中已经在SpringMVC基础框架的基础上应用了BootStrap的后台框架,在此基础上记录select2的使用. 应用bootstrap模板 基础项目源码下载地址为: SpringMV ...
- jquery 模糊查询下拉框
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD&g ...
- jquery select 列表 ajax 动态获取数据 模糊查询 分页
最近需要一个这样的select 在网上找的多是数据一次性获取到再通过前端模糊查询匹配的 这样在数据量比较大的情况下不适合 ,所以参考http://www.jq22.com/jquery-info145 ...
- 【EasyUI】combotree和combobox模糊查询
这里说的模糊查询指在输入框输入,然后自动在下拉框中显示匹配结果,类似Google搜索提示 EasyUI库已经实现了combobox的查询过滤功能,但只能从头匹配,原因是EasyUI库的代码限制: fi ...
- ASP.NET MVC+EF框架+EasyUI实现权限管理系列(20)-多条件模糊查询和回收站还原的实现
原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(20)-多条件模糊查询和回收站还原的实现 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇) (1):框架 ...
- Springmvc+Myabtis+Ajax实现异步分页emp+dept（全部查询及模糊查询）
1.在项目中创建如下目录 2.创建实体类Dept package com.entity; import java.io.Serializable; /** * 部门表 * @author Admini ...
随机推荐
- iOS Bundle display name国际化
iOS app包显示名称可以国际化,具体方法如下: 编辑Info.plist,添加一个新的属性:Application has localized display name,设置该属性的类型为bool ...
- SQL Server 2008连接字符串写法大全
一..NET Framework Data Provider for SQL Server 类型:.NET Framework类库使用:System.Data.SqlClient.SqlConnect ...
- java 文件上传
java 上传文件 如果不依赖框架的话 要利用 Apache 中几个jar文件来处理 1. 给表单设置enctype属性,其值为 "multipart/form-data" ...
- .net与数据库知识点
<%服务器方法;%> (调用服务器方法,要写;) <=%服务器方法%> (有返回值输出,不能写;) public ActionResult Index(int id = 0) ...
- IE兼容性的注意点
IE会将注释节点实现为元素,所以在IE中调用getElementsByTagName里面会包含注释节点,这个通常是不应该的 getElementById的参数在IE8及较低的版本不区分大小写 IE7及 ...
- scoi 2008 && bzoj 1076 奖励关
传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=3223 思路:15?好,状压,OK． 这是转移方程 if((s[k]&j)==s[k] ...
- 面向对象day1
一.什么是面向对象 之前我们学习过面向过程和函数式编程,在讲函数的时候有说过之所以有函数式编程是因为面向过程编程是根据业务逻辑从上到下垒代码,会出现大量代码的重用和臃肿,so,函数式编程将同一功能的代 ...
- sql 语句纵表变横表
现把转换方法列举如下: 1.纵表转横表: 纵表结构 TableA Name Course Grade 张三 语文 75 张三 数学 80 张三 英语 90 李四 语文 95 李四 数学 55 横表结构 ...
- String高效编程优化（Java）
1, substring截取超大字符串可能造成的“内存泄漏” 2,+ 操作符的优化和局限 3,StringBuilder和StringBuffer 4,split和StringTokenizer做简单 ...
- JAVA微信支付多次回调方法解决方案
@WebServlet("/ActionServlet")public class PayWxOrderingReqCBS extends HttpServlet { public ...