【select输入检索】下拉select支持输入检索之组件selectpage的属性应用详解
javascript 前端 开发语言
【写在前面】应上面领导要求,界面的下拉框不能太小气,既要美观又要好用,这不想到了曾经自己用过的selectpage组件,虽然没看到正式的维护平台,但是个人觉得这个组件还是蛮好用的,下面就此需求、效果、实现三方面展开描述;
1、需求说明
查询业务有一个检索条件,它(后称对象)包括名称,UID,IP地址三个属性值,但是我想要通过这三个属性模糊检索,实现下拉筛选出该对象,也就是输入框内输入任意一个属性的字符,只要包含其一就检索出符合条件的对象,然后自己再去选择作为查询条件;
像这种能在select框内输入内容去检索的需求当然也可以自己疯转,但是selectpage组件极力推崇,因为其涵盖多种功能:选择事件、自定义显示值、获取选中文本及选中项、清空、赋值等多种功能;
2、展示效果
做的这种样式效果主要参照百度的下拉检索,我还特意针对selectpage的原生css做了一次改变,不然效果领导看了估计难受。
3、实现核心
具体实现围绕下面几个方面展开:
A、选择后的数据回填
其中selectpage里面有个eSelect:function(data){},此处的function体内就是选择后的触发事件,我们可以在里面设置回填值是多少,比如说我选的是一堆数据,但是回显我只显示名称;
核心代码:
$("#selectId" + "_text").attr("subuid",data.subuid);
$("#selectId" + "_text").val(data.name);
【注】这个里面的selectId就是你设置的输入框,为啥会有_text?因为他自带的组件会将文本填写到另一个输入框;所以处理时候我们对这个标签赋值就可以,效果如下所示:
B、下拉数据展示内容的自定义
为啥能够将名称、UID、IP拼接起来?这个主要就是用到了selectpage组件的formatItem:function(data){};方法,在方法体能可以将下拉的数据进行任意的组装,具体实现代码如下:
formatItem: function (data) {
if (data.name != null) {
return data.name + '_' + data.uid + '(' + data.ip + ')';
}
}
C、自定义修改样式显示
主要之前的样式其实也还不错,但是宽度最大限制了300px,要是自定义的显示文本过长就不好看了,所以我修改了一下selectpage.css对应的li的宽度和上面的框统一宽度,另外鼠标移上去有深色背景白色字,但是并不是所有的界面都适配,所以针对hover后的样式及行高我也改了一下,如下所示原生的和修改后的对比效果:
当然具体的效果可以根据自己来定制化。
4、写在最后
如有需要demo的可以一键三连留下您的邮箱,我们一起交流学习更多前端的小工具!
zzffflll: 1978830361@qq.com求资料
明烛天南ᝰ: 3128793441@qq.com已关注,求大气山河页面
Ghost Mice: 已经实现了 感谢🙏
IT黄大大: 不是后端的,主要就是看你图片引用的路径是不是错了,正常背景都会展示的
IT黄大大: 感谢关注,已发送,请查收