`

select2 的运用点滴

 
阅读更多

这一段时间在开发一个企业的信息管理平台,在用到select2时,临时抱佛脚学习了一下。

 

$('#e3').select2({
	placeholder: "请输入",
	minimumInputLength: 1,
	separator: ",", // 分隔符
	maximumSelectionSize: 5, // 限制数量
	initSelection: function(element, callback) { // 初始化时设置默认值
	},
	createSearchChoice: function(term, data) { // 创建搜索结果(使用户可以输入匹配值以外的其它值)
		return {
			id: term.mid,
			text: term.name
		};
	},
	formatSelection: function(item) {
		return item.name;//注意此处的name,要和ajax返回数组的键值一样
	}, // 选择结果中的显示
	formatResult: function(item) {
		return item.name;//注意此处的name
	}, // 搜索列表中的显示
	ajax: {
		url: "{:U('Admin/Member/getzj')}", // 异步请求地址
		dataType: "json", // 数据类型
		data: function(term, page) { // 请求参数(GET)
			return {
				q: term
			};
		},
		results: function(data, page) {
			return data;
		}, // 构造返回结果
		escapeMarkup: function(m) {
			return m;
		} // 字符转义处理
	}
});

 php代码,基于thinkphp

public function getmember() {
	$q = I('q');
	$map['name'] = array('like', $q . '%');
	$res = D('Member') -> field('mid as id,name') -> where($map) -> select();
	if ($res) {
		$a = array('more' => 'false', 'results' => $res);
	}
	$this -> ajaxReturn($a);
}

 本地化

要引入select2_locale_zh-CN.js

分享到:
评论
1 楼 影非弦 2015-02-06  
select2提供样式吗?

相关推荐

    select2.mim.js and select2.min.css.zip

    本文将详细介绍Select2及其相关文件`select2.min.js`和`select2.min.css`,以及它们如何在项目中发挥重要作用。 Select2是一款强大的JavaScript库,它能够将普通的HTML `<select>`元素转变为功能丰富的选择器。通过...

    jquery select2组件

    **jQuery Select2组件详解** `jQuery Select2`是一款强大的、高度可定制的下拉选择框插件,它在原生HTML `<select>` 元素的基础上提供了丰富的功能和优秀的用户体验。这款组件广泛应用于网页开发中,使得传统的单选...

    Select2的插件下载.zip

    **Select2插件详解** Select2是一款非常流行的JavaScript库,基于jQuery设计,它的主要目标是为HTML中的`<select>`元素提供一个强大的替代方案。在网页开发中,原生的`<select>`元素功能有限,样式单一,而Select2...

    select2(jquery)插件下载

    **jQuery Select2插件详解** Select2是一款基于jQuery的增强型下拉选择框插件,它极大地改进了原生HTML `<select>` 元素的用户体验和功能。标题中的"select2(jquery)插件下载"指的是这个插件的获取途径,通常通过...

    select2ztree.zip

    《基于Select2与jQuery-ZTree实现的树形下拉框详解》 在现代网页开发中,用户界面的设计和交互体验愈发重要。一个优秀的界面能够提升用户的操作效率,增强产品的吸引力。今天,我们将深入探讨如何利用Select2和...

    bootstrap-select2-ztree.zip

    Bootstrap、Select2 和 ZTree 是三个在Web开发中常用的库,它们分别提供了不同的功能,而将它们整合在一起可以实现更复杂的交互式用户界面。这里我们将深入探讨这些库以及如何将它们结合来创建一个下拉框带树结构的...

    select2js,css和中文包

    **标题与描述解析** 标题"select2js,css和中文包"表明我们关注的是一个名为Select2的JavaScript库,它涉及到CSS样式以及中文...理解和熟练运用Select2,能提升网站或应用的用户体验,是前端开发者必备的技能之一。

    select2.js/select2.css

    select2资源包。里面包含select2相关的js、css,解压后在dist目录下可找到。使用select2需要搭配jquery1.8以上版本。在这资源包的vendor文件夹下有jquery2.1的版本

    使用select2实现下拉列表动态模糊查询

    在这个压缩包中,我们有`select2.min.css`(样式文件)和`select2.min.js`(JavaScript 文件)。将这两个文件放入你的项目目录,并在HTML文件中引用它们。例如,在`<head>` 标签内添加: ```html <link href="...

    select2插件联动查询用到的css和js文件

    1. **select2.css**:这是Select2的样式表文件,包含了所有必要的CSS样式,用于定义Select2选择框的外观,如边框、背景色、字体样式等。正确引入这个文件是保证Select2正常显示并具有统一设计风格的关键。通常,你...

    jquery select2

    《jQuery Select2:提升HTML Select...<link href="https://cdn.jsdelivr.net/npm/select2@4.x/dist/css/select2.min.css" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> ...

    select2 省市区 级联 下拉菜单

    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"> ``` ...

    下拉框、下拉控件之Select2内含css和js

    **下拉框与下拉控件:Select2详解** 在网页设计中,下拉框(Dropdown)是一种常见的用户界面元素,用于提供多个选项供用户选择。然而,原生的HTML `<select>` 标签功能相对有限,样式单一,无法满足现代网页设计的...

    select2-master.zip

    《Select2:打造高效下拉菜单的神器》 在网页开发中,下拉菜单是不可或缺的元素之一,尤其是在实现多级联动效果时。而Select2则被誉为“最好用的下拉插件”,它以其强大的功能和简洁的API,赢得了开发者们的广泛...

    select2+jquery

    标题"select2+jquery"指出,这个压缩包的内容是关于一个名为Select2的组件,以及它与jQuery库的结合使用。Select2是一个强大的选择器插件,它可以增强HTML的选择框功能,提供更丰富的用户体验。而jQuery是一个广泛...

    前端select2组件

    在前端开发中,Select2 是一个非常流行的 JavaScript 组件,它极大地增强了原生 HTML `<select>` 元素的功能和外观。这个组件以其丰富的特性和...在实际项目中,可以根据需求灵活运用 Select2,打造优质的用户界面。

    下拉框带模糊查询引入select2组件.zip

    在这个例子中,`#mySelect`是下拉框的ID,`select2.min.js`和`select2.min.css`分别是Select2的JavaScript和CSS文件。 总结来说,"下拉框带模糊查询引入select2组件.zip"是一个包含Select2库和使用示例的压缩包,...

    Select2实现全国省市区三级联动下拉菜单

    `Select2`是一个流行的jQuery插件,它提供了丰富的功能和自定义选项,使得创建优雅的下拉选择框变得更加简单。本教程将详细讲解如何利用`Select2`实现全国省市区的三级联动下拉菜单。 首先,我们需要理解`Select2`...

    select2支持拼音检索

    《Select2 拼音检索功能详解》 在前端开发中,Select2 是一款非常流行的多功能选择器插件,它极大地扩展了HTML `<select>` 元素的功能,提供了丰富的定制性和用户体验。本文将深入探讨 Select2 的一个独特特性——...

    bootstrap select2插件用ajax来获取和显示数据的实例

    接下来,通过jQuery代码调用Select2插件,对特定的select元素进行初始化。在这个过程中,我们设置了几个关键的配置选项。"placeholder"用于给select元素提供一个默认的提示信息,"tags"允许用户输入自定义的选项,...

Global site tag (gtag.js) - Google Analytics