支持 autocomplete、键盘操作、分页、标签多选、国际化多语言等多功能的选择器插件
多选 Tags 模式
单选模式
项目 GitHub 地址:
https://github.com/TerryZ/SelectPage
插件官方首页(入门指南、DEMO、文档):
SelectPage 是一个基于 jQuery 开发的多功能下拉分页选择器,作为一个功能强大的表单控件,它一定会有很多缺点和不足,欢迎您 提交 对项目的意见和建议,让我们一起让 SelectPage 变得更好
基于 jQuery、Bootstrap2、3 开发
也可应用于无任何 UI 框架的原生 HTML 环境
Autocomplete 输入自动查找功能
结果列表分页展示
允许使用静态 json 数据源或 ajax 动态请求的数据源
使用键盘快速操作基本功能及分页功能
多项选择以标签( Tag )形式展现
结果列表自动判断屏幕边缘,避免内容超出可视范围
丰富的参数设置及功能 API 调用
浏览器兼容:IE8+、Chrome、Firefox 等
插件基于 jQuery 开发,可在 Bootstrap2、3 环境下使用,亦可在原生无 UI 框架的环境下直接使用
有时候我们需要有一个插件,它可以输入关键字进行快速查找,可以下拉进行选择,可以在展示大量数据时进行分页显示,可以使用键盘进行快速操作,可以适应各种 UI 环境,可以被灵活定制,而上述的情况就真的出现在现实项目的需求里了
这就是为什么会有 SelectPage 插件的原因
在 Github 或 码云 上下载最新版本,解压后并放入需要使用的项目中
<!-- 基础环境引用说明 -->
<!-- Bootstrap 的 UI 框架基础样式 -->
<link rel="stylesheet" href="bootstrap.min.css" type="text/css">
<!-- 插件使用了部分 font-awesome 的图标,所以需要引入该样式 -->
<link rel="stylesheet" href="font-awesome.min.css" type="text/css">
<!-- jQuery,Bootstrap 的基础脚本引用 -->
<script type="text/javascript" src="bootstrap.min.js" >< /script>
<script type="text/javascript" src="jquery.min.js" >< /script>
<!-- 插件使用的样式表文件,根据使用环境的 Bootstrap 版本进行引用 -->
<!-- Bootstrap2 使用 -->
<link rel="stylesheet" href="selectpage.css" type="text/css">
<!-- Bootstrap3 使用 -->
<link rel="stylesheet" href="selectpage.bootstrap3.css" type="text/css">
<!-- 非 Bootstrap 生态下引用该样式 -->
<link rel="stylesheet" href="selectpage.base.css" type="text/css">
<!-- 以上的样式文件根据实际使用的环境进行引用,引用其中一项即可 -->
<!-- 插件核心脚本 -->
<script type="text/javascript" src="selectpage.js" >< /script>
<!-- 设置文本框为插件基本元素 -->
<input type="text" id="selectPage" >
//定义数组,在服务端返回的数据也以该格式返回:Array[{Object},{...}]
var tag_data = [
{id:1 ,name:'Chicago Bulls',desc:'芝加哥公牛'},
{id:2 ,name:'Cleveland Cavaliers',desc:'克里夫兰骑士'},
{id:3 ,name:'Detroit Pistons',desc:'底特律活塞'},
{id:4 ,name:'Indiana Pacers',desc:'印第安纳步行者'}
];
//初始化插件
$('#selectPage').selectPage({
showField : 'desc',
keyField : 'id',
data : tag_data
});
1
touzi 2017-09-07 10:22:30 +08:00
支持中文拼音首字母检索吗?
|
2
Terry05 OP @touzi 中文拼音首字母检索,这种功能 SelectPage 目前并不打算做,因为这个功能实际上可以在 ajax 数据源模式,同时数据表中有对应的简码字段进行匹配,插件本身实现这种东西不现实
|
4
Terry05 OP @BoiledEgg ajax 数据源模式对于数据查询过滤的事情就已经交给服务端了,插件只关注返回的数据,所以这种需求直接使用 ajax 模式即可
|
5
BoiledEgg 2017-09-07 17:01:07 +08:00
@Terry05 举个业务场景,行政区选择,选到市,我们现在的做法就是将省市数据一起返回,过滤前端自己做。基本上这种数据比较固定,量上又不大不小的,显然前端过滤比较好。而我用过的几种类 autocomplete 的插件确实都支持自定义过滤匹配的方法,和 ajax 后台过滤也并不冲突。通用插件不就该这样么?
|
6
Terry05 OP |