terryz / selectpage Goto Github PK

A simple style and powerful selector, including ajax remote data, autocomplete, pagination, tags, i18n and keyboard navigation features

Home Page: https://terryz.github.io/selectpage

License: MIT License

JavaScript 75.91% SCSS 24.09%

jquery selection select-multiple pagination javascript jquery-plugin autocomplete ajax-search keyboard tagsinput

selectpage's People

Contributors

Stargazers

Watchers

Forkers

karsonzhang zhoujianyong chubby886 wxtech jiafenggit zhiqinghuang feik zzadsl lxiaoyi lcbyz gspandy harriks zhangjunming2010 daishuo ttxing shixinke qq499431383 dut3062796s xiaopohou sinper0212 restmad litswu murusu xuewl ninestep min100110 hiipeng cpanmac hattoriheiji tinyms jijia-cn ttwanggithub lwcloud barryyue soitun sinlmao wg-com gnosuw li5t 347154468 daya-prac cnwhy laihui0207 qingsing yunboy alphadyz temo456 toohamster airron sparkinzy xiaoyu-edu liuxingke wenthywang xialinlin alwaysandforeveryimi loyalforyou deawx zhoudianyou xyx119 fennyhan teng2015 strayerm chatty-go thinklib zhoupanqi zqlovejyc yehuangcn changsongyang ahzseven davidalphafox azkoss vclisunlang luckydonkey austin-zhao-gh fossabot sheeranx ffjimako hfhna itrojan chenyaqiang leeyongyao xiapeixu yayahello rahulmeshram lamda2019 wonvee woyuwodao chenjiake skiphyuk zhuchengyi hhy5277 marlonnardi chao1991528 ahyanhailong guoxiangshuai akshay-hegde hjhwel yuzhu20 jncehuang2 365-w

selectpage's Issues

焦点落入 iframe 的时候，控件不能隐藏。

焦点落入 iframe 的时候控件不能隐藏，如果控件下方正好是个文本编辑器或是iframe窗口，控件不能隐藏(一般的操作习惯焦点是直接落入下一个控件的)。

编辑页的级联菜单显示的问题

现在级联菜单是可以实现了
但是在已经创建好级联关系的信息上，做编辑页，想把级联菜单默认显示出来，不知道怎么做
现在的情况是只有一级菜单的选中项显示出来了，二级的联动选项有，但是没有在输入框里面显示

comboselect.js 里面的$.eAjax 是什么意思？做了封装了吗

self.prop.xhr = $.eAjax({

控件选中值以后，手动删除选中的部分值后，鼠标移出使控件失去焦点，控件显示值未被清空，造成显示不全

您好！ 在使用了SelectPage之后，我感觉这是一个非常优秀的插件！不过在使用过程中，发现了一些问题想与你探讨！
 在选中下拉框的某个值以后，我删除选中值的一部分后，鼠标移出控件，会有残留的值显示在控件上。请问有计划对这一部分进行改进呢？
  还有就是通过删除键(backspace)手动删除选中的值，而不是通过控件上的 x 删除，是否有回调事件呢？

以上是我遇到的问题，希望您能抽空回答，谢谢！

点击右边框的X清除内容后，再输入相同的内容无法将该内容传入后台

比如查询城市
1.输入北京
2.选中北京
3.点击X清除数据
4.再次输入北京
5.后台发现接受的是空字符串。

大仙,帮我看看这是啥问题

帮我看看什么问题?
(顺便提一句,啥时候加入Tree显示,你无敌了,因为下拉列表多跟分类有关.祝好!)

console报错--------------------
Uncaught ReferenceError: errorThrown is not defined
at Object.success (selectpage.min.js:1)

html----------------------------------

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
我来了
    <!-- 插件使用的样式表文件 -->
    <link rel="stylesheet" href="https://terryz.oschina.io/lib/selectpage/selectpage.css" type="text/css">

    <script src="https://terryz.oschina.io/lib/jquery.min.js"></script>
    <!-- 插件核心脚本 -->
    <script type="text/javascript" src="https://terryz.oschina.io/lib/selectpage/selectpage.min.js"></script>
</head>
<body>
<input type="text" id="selectPage5">
<script>
    $('#selectPage5').selectPage({
        showField : 'name',
        keyField : 'id',
        data : 'http://localhost:8089/admin/shop/item/category/selectpage_jsonList',
        //params : function(){return {'name':'aa','sex':1};},
        //ajax请求后服务端返回的数据格式处理
        //返回的数据里必须包含list（Array）和totalRow（number|string）两个节点
        // eAjaxSuccess : function(d){
        //     var result;
        //     if(d) result = d.values.gridResult;
        //     else result = undefined;
        //     return result;
        // }
    });

</script>
</body>
</html>

json---------------------------------

[
{
id: 1,
intro: "1	食品",
name: "食品",
pid: 0,
shopId: 1
},
{
id: 3,
intro: "",
name: "快速消费品",
pid: 1,
shopId: 1
},
{
id: 4,
intro: "",
name: "水果",
pid: 1,
shopId: 1
},
{
id: 8,
intro: "",
name: "苹果",
pid: 4,
shopId: 1
},
{
id: 9,
intro: "",
name: "鸭梨",
pid: 4,
shopId: 1
},
{
id: 10,
intro: "",
name: "香蕉",
pid: 4,
shopId: 1
}
]

自定义下拉选项格式

我有这么一个需求：需要在每个下拉选项后面添加新增、修改、删除的操作(同时这些操作需要和后台服务交互以及有可能会再次弹出一些窗体)。通过阅读文档我发现
formatItem这个function应该可以实现，于是我进行了尝试，并在尝试过程中发现一些问题。下面是我遇到的问题。

环境：

开发工具：HBuilder 7.2.2

SelectPage: 2.14

JQuery:2.2.4

第一次尝试：

$('#class').selectPage({
			    showField : 'name',
			    keyField : 'id',
			    data : clazz,
			    pageSize:10,
			    formatItem:function(data) {
			    	var html = "<li pkey='>" + data.id +  "' title='" + data.name  +  "' style='float:left'>"+data.name+ "</li><a href='http://www.baidu.com'>delete</a>"
			    	return html;
			    }
			});

运行后发现页面能够显示数据且显示delete标签。但是点击无效果。同时在选择后会将 data.name的数据和delete 拼成一个字符串显示在输入框里。像这样：一年纪delete。通过跟踪页面的html构成，发现在页面里是这样生成数据的：

<li pkey="24" title="<li pkey='>24' title='一年级' style='float:left'>一年级</li> <a href=''>delete</a>" class="">
    <li pkey=">24" title="一年级" style="float:left">一年级</li>
    <a `href="">delete</a>
</li>

注意title内容。这说明SelectPage会自己生成li作为行，于是我进行了第二次的尝试，修改代码为这样：

formatItem:function(data) {
			    	var html = "<a href='http://www.baidu.com'>delete</a>"
			    	return html;
			    }

这时运行后的页面没有data.name数据，出现了delete标签，点击后还是无点击效果。跟踪页面html结构如下：

<li pkey="24" title="<a href='http://www.baidu.com'>delete</a>" class="">
 <a href="http://www.baidu.com">delete</a>
</li>

这里我基本搞明白生成规则，那么我如何能实现类似这样的页面代码呢？

<li pkey=">24" title="一年级" style="float:left">一年级
 <a href="http://www.baidu.com">delete</a>
</li>

在点击delete时能执行我的js方法或我的url，在点击一年级时和普通的下拉列表一样。

设置focusDropList为false，输入框获取焦点后还是弹出查询框

文档里面有focusDropList这个属性但是在js中没有找到这个属性。

动态修改数据源

在项目开发中用到了selectPage,遇到了一个问题，发现官方例子里同样存在这个问题，我在使用动态修改数据源的时候，初始的数据中，点击翻页到最后一页，不选择，点击修改数据源，再点击输入框加载数据为空，再次点击数据更新了。

控件失去焦点后，如果输入框内有不匹配的选择项的内容，不会自动清空

在2.12中 noResultClean 貌似这个参数又是一个想起作用，但实际却什么作用都没起到的参数；

使用过后一些疑问

作者你好，用了之后有点小疑问：

autoSelectFirst设置 ajax模式好像不起作用；
noResultClean 当已经选中，再去掉部分输入值时，没有自动清除选项

获取焦点和失去焦点问题

首先非常感谢提供这么好的下拉插件，目前发现了一些不算bug的问题。

获取焦点之后失去焦点会默认选择了第一项。

插件实用，赞一个，但是data 改为url的时候，赋值改变选中项时有bug

插件实用，赞一个，但是data 改为url的时候，赋值改变选中项时有bug；
data直接是数组，是正常的。希望能修复一下，毕竟插件外加一个ajax请求，就缺少灵活性了

[bug] win10，自带微软输入法无法搜索

win10系统，自带微软输入法无法搜索，安装第三方输入法可以正常搜索。

tips：切换简体繁体无效。

// data[search][user] -> data[search][user_primary_key]
if (input_name.match(/]$/)) input_name = input_name.replace(/]?$/, namePrefix);
else input_name += namePrefix;
if (input_id.match(/]$/)) input_id = input_id.replace(/]?$/, namePrefix);
else input_id += namePrefix;

namePrefix 应该是 namePrefix + "]" 吧

在使用selectPage 的时候，请问怎么实现关联下拉

比如有两个下拉框，第一个是省份，第二个是城市。选择了某省份的时候，怎么显示这个省份下的所有城市。不知道怎么触发根据省份id查询城市列表！

SelectPage入门指南

https://terryz.github.io/guide.html

显示值有下拉值希望能分开

你看，我下拉是树状菜单，我希望显示的时候不显示左边的符号~

Ajax 获取数据，文本框不会显示选中值

关于清除按钮的显示问题

谢谢TerryZ在 v2.7版增加了输入框禁用或只读状态，不显示清除按钮的功能，这个功能我一直想要。但当输入框从禁用变为启用再变为禁用后，清除按钮就一直显示了。建议能不能做一个清除按钮显示的开关，单独控制？

bug一枚，请查收

            $('#select_page').selectPage({
                showField : 'app_key',
                searchField:'keyword',
                keyField : 'id',
                pageSize : 10,
                data : "{{ url_for("admin.ajax_app_page") }}",
                eAjaxSuccess : function(d){
                    var result;
                    if(d) result = d.data;
                    else result = undefined;
                    return result;
                },
                formatItem : function(data){
                    return data.company + '(' + data.app_key + ')';
                }
            });

首先代码是没错的，数据都可以得到，数据翻页也是可以正常使用的。目前的问题是，假定数据总共5页，在输入关键词test后，得到新数据有3页，但是点击下一页和最后一页没有任何反应。麻烦作者查看下ajax下是不是有这个bug。
ps：还有一个疑问，如果在ajax分页下，怎么初始化选中呢？
以下是我的后端代码：
def ajax_app_page():
keyword = request.form.get('keyword','')
pageNumber = request.form.get('pageNumber', 1, type=int)
pageSize = request.form.get('pageSize',10,type=int)
apps_obj = Apps.query.order_by(Apps.create_time.desc())
apps_obj = apps_obj.filter(Apps.is_del == 0)
if keyword !='':
apps_obj = apps_obj.filter(or_(Apps.company.like(u"%{0}%".format(keyword)),Apps.app_key.like(u"%{0}%".format(keyword))))

paginate = apps_obj.paginate(
    pageNumber, per_page=pageSize, error_out=True)
apps_items = paginate.items
apps = []

for item in apps_items:
    apps.append(item.to_json())

data = {
    "pageSize":pageSize,
    "pageNumber":pageNumber,
    "totalRow":paginate.total,
    "totalPage":paginate.pages,
    "list":apps
}
return CommonResponse(ResultType.Success, message=u"获取成功",data=data).to_json()

排版好像有点问题将就看下吧！

未查找的标签，是否支持动态添加

如题，是否支持添加功能，输入未查找到进行添加

服务端数据模式的联动的数据格式问题请教

var lastProvince = '';
//省份选择器初始化
$('#selectPageProvince').selectPage({
showField: 'name',
keyField: 'id',
data: 'http://aaa.com/loadProvince',
//选择省份时，清空城市列表已选中的项目
eSelect: function (data) {
if(data && lastProvince !== data.id){
$('#selectPageCity').selectPageClear();
}
}
});
//城市选择器的初始化，使用空数据进行初始化
$('#selectPageCity').selectPage({
showField: 'name',
keyField: 'id',
data: 'http://aaa.com/loadCity',
//向服务端提交的参数中，增加已选中的
//设置返回-1，意为通知服务端返回空列表，初始化时使用
params: function(){
var pv = $('#selectPageProvince').val();
return {'province': pv?pv:'-1'};
}
});

'http://aaa.com/loadProvince' 这个返回的数据格式是这么样的？

SelectPage默认值问题请教

在使用SelectPage的时候，可不可以，我传个id进去，在页面渲染的时候默认值就是这个id对应的值啊？

排除orderBy 是否可以关闭？

后端给出的数据已经排除，但是ID无序的。到前端又被排了一次。 orderBy 能否给个参数关闭？

searchField 这个字段貌似没用啊

searchField 这个字段根据里应该是在发送ajax请求时，设置搜索内容的请求参数名；也就是说当searchField: 'query'时；则后端可以通过query参数获得搜索内容；

实际在2.12中，设置这个值，除了对orderBy有作用外，其他没变化；而搜索内容的请求参数名则是searchKey

在2.12的代码中，下面这段，完全不知所以然啊，这循环遍历一个写死的，就一个元素的数组是什么鬼？？？？

//将参数内容从使用","分隔的字符串转换为数组
var arr = ['searchField'];
for (var i = 0; i < arr.length; i++) {
        option[arr[i]] = this.strToArray(option[arr[i]]);
}

真心不知道searchField是做什么用的

几个小疑问

感谢作者这么优秀的控件，初步尝试过程中有几个小疑问：
1.AJAX获取数据时似乎只能是POST；
2.AJAX获取数据时，有最少输入字符数的设置么，超过该长度才去抽取数据？
3.当输入关键词时，自动按空格分段，是否可以关闭此功能的配置，或者自定义分隔符？

谢谢～

下拉选项新增功能建议

是否每一个下拉选项可以支持 描述文本，也就是下拉选项支持 标题 + 描述

bSelectPage怎么初始化？

bSelectPage多次调用，会出好多下拉箭头。

能否可以显示多个字段或者自定义格式

showField 只能指定一个字段显示，比如：张三男

非常棒的项目，能不能加一个分级的菜单功能

你好，非常感谢TerryZ的项目，能不能加一个可以分级的下拉菜单功能？
就像这样的：
http://element-cn.eleme.io/#/zh-CN/component/cascader

默认值的问题和分页样式名的问题。

1、分页样式名称最好换个默认都是这个名称，就导致还要手工来改样式适配。最好根据插件的特性单独起个名字。
2、源码758-772 行的代码，在使用中发现问题。如果控件的默认值在data 里面找不到，就导致 self.afterInit(self, data); 的 data 参数为空，从而直接导致 afterInit 里面取值报错。 (控件可以手输，可以选择就会产生不一致。或是下拉的数据实际发生变更，都有可能导致控件默认值得和获取数据值不一致。)

如下，如果控件此时有值，值是123就导致 afterInit 内部报错。

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
});

希望增加内容清除事件回调函数

希望增加在点击sp_clear_btn按钮时的事件回调函数

请问SelectPage如何动态刷新数据源

目前我需要根据type来进行不同的请求获取不同的数据源，我发现selectPage每初始化一次，就会创建一个。当前动态刷新数据源的方法不？

input 为 disabled的时候麻烦把sp_clear_btn 禁用掉，叉叉按钮

1.编辑页面没办法做到数据的回显

当进入编辑页面的时候,原有数据的value值也被cpoy到了text字段上, 但是就是不显示出来,请问是什么鬼????

selectToCloseList 设置为 false，多选调用selectPageClear后会自动打开

selectToCloseList 设置为 false，多选调用selectPageClear后会自动打开，版本 v2.15

功能改进建议

在实际使用中，我需要在发送ajax前，动态设定ajax的请求参数；举个例子，我有一个table，table的每一行都有一个输入框input:text和一个selectpage；然后根据当前行的输入框内容，作为selectpage的ajax的参数提交给服务器端后返回selectpage的内容；

在当前selectpage的参数params中，我无法获得当前selectpage控件的dom对象，也就无法匹配到当前表格行的输入框；

另外，希望selectpage增加获取焦点后的事件回调，并在该回调中可以访问控件dom和控件对象本身；以便于可以动态设置selectpage各项参数；

给params的函数加上参数的方式：

var result = _paramsFunc();

改成

var result = _paramsFunc(this);

然后在使用是就可以这样用了

params: function(self){
    self.xxx;  
}

一些想法

非常感谢您提供这么好的插件，目前有一些想法：

多选有清除内容的功能，单项没有清除功能，需要我们自己delete删除。但是如果我们设置文本框为只读时就无法删除内容了。（也就是无法取消选中）
我们选中了某个选项，但是由于我们文本框可以删除数据，这时我删除了几个字，失去焦点之后就和我们下拉数据对不上了。这样无法保障我们录入数据的正确性。是否能够新增一个参数（可以配置是否同步文本框内容）：如果用户选中之后又调整了文本框内容，当失去焦点之后选中上一次选中的值（也可以说是没有动过文本框内容的值）

New version not supported for jquery 3.2.1

selectpage.js:1568 Uncaught TypeError: pagebar.find(...).size is not a function
at buildPageNav (selectpage.js:1568)
at SelectPage.setNavi (selectpage.js:1597)
at SelectPage.prepareResults (selectpage.js:1538)
at SelectPage.searchForJson (selectpage.js:1490)
at SelectPage.suggest (selectpage.js:1276)
at showList (selectpage.js:865)
at HTMLInputElement. (selectpage.js:877)
at HTMLInputElement.dispatch (jquery-3.2.1.min.js:3)
at HTMLInputElement.q.handle (jquery-3.2.1.min.js:3)
at HTMLInputElement.trigger (jquery-3.2.1.min.js:3)

增加 dataFilter 方法

文档只是粗略的看了一下，没发现 dataFilter 这个参数。增加一个给Ajax返回的原始数据的进行预处理的函数，参见 $.ajax 的 dataFilter。因为好多情况后台返回数据已经固定。只能前端拿到数据后进行预处理(当然自己用$.ajax请求，拿到数据处理后返回给控件也是可以的)。

js 643行代码获取不到 bootstrap外部宽度

<div class="col-md-10">
    <input type="text" id="selectPage" class="form-control" placeholder="请输入关键词">
</div>

643行的代码宽度为什么计算是100px啊？

容器高度不足，下拉框向上展开。

直接在官方在线demo也能重现。将浏览器高度调整小于400也会出现这个问题。该问题在jq插件库也有提问。2017-09-19，下面是附上图

测试官方的示例发现的问题

官方的示例：
1、点下选择什么也不选。鼠标点一下页面其它地方。此时输入框默认就选种了一个，应该为空。
2、默认获得焦点的控件，圆角成了方角。
3、输入框有图标的，如果选择的文字超过输入框，图标和文档重叠，应该将图标的距离空出来。