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

时间： 2024-11-29 02:01:26

jquery.select2 模糊查询的相关文章

jQuery 异步模糊查询 实现下拉搜索功能

<style>            .bdsug {                background: none repeat scroll 0 0 #fff;                border: 1px solid #ccc;                box-shadow: 1px 1px 3px #ededed;                display: none;                position: absolute;              

jquery.autocomplete 模糊查询 支持分组

//demo <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css/styles.css"/> <script src="js/jquery-1.11.3.js" type="text/

jquery easyui combobox 从指定位置开始模糊查询

$("#bzr").combobox({ url: "ClassSave.aspx?opt=bzr&bzr=<%=arrbj[2]%>", valueField: "value", textField: "text", mode: "local", filter: function (q, row) { var opts = $(this).combobox('options'); va

jquery 模糊查询下拉框

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> xSelectList Demo </TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author" CONTENT

Springmvc+Myabtis+Ajax实现异步分页emp+dept（全部查询及模糊查询）

1.在项目中创建如下目录 2.创建实体类Dept package com.entity; import java.io.Serializable; /** * 部门表 * @author Administrator * */ public class Dept implements Serializable{ /** * */ private static final long serialVersionUID = 1L; private Integer deptno; private Stri

combobox和combotree模糊查询

First /** * combobox和combotree模糊查询 * combotree 结果显示两级父节点(手动设置数量) * 键盘上下键选择叶子节点 * 键盘回车键设置文本的值 */ (function(){ //combobox可编辑,自定义模糊查询 $.fn.combobox.defaults.editable = true; $.fn.combobox.defaults.filter = function(q, row){ var opts = $(this).combobox('

ajax 判断账户密码 调取数据模糊查询 时钟

一.判断账户密码 <Login.html> 1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 3 <title></title> 4 <script src="Script/jquery.js"></script> 5 <script languag

前端js模糊搜索（模糊查询）

1.html结构: <label for="searchShop" class="clear pos-a" style="top:17px;">            <input type="text" id="searchShop" placeholder="场所搜索">            <input type="button"

一个奇葩问题，jQuery的chzn-select查询失效

之前遇到了一个奇葩问题,jQuery的chzn-select查询失效.本来用jQuery的chosen,挺好用的,这个select可以自动查询匹配,比select2用得更方便. 可是,有的地方用得却无法查询,有的地方又可以,查找了好久还是找不出来原因.用了firebug,又查代码,费了很大周折,最后还是发现了问题了. 原来的代码是这样的 <td> <select class="chzn-select" id="industryId" name=&q