【select输入检索】下拉select支持输入检索之组件selectpage的属性应用详解

【写在前面】应上面领导要求，界面的下拉框不能太小气，既要美观又要好用，这不想到了曾经自己用过的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);
1
2

【注】这个里面的selectId就是你设置的输入框，为啥会有_text?因为他自带的组件会将文本填写到另一个输入框；所以处理时候我们对这个标签赋值就可以，效果如下所示：

B、下拉数据展示内容的自定义
为啥能够将名称、UID、IP拼接起来？这个主要就是用到了selectpage组件的formatItem:function(data){};方法，在方法体能可以将下拉的数据进行任意的组装，具体实现代码如下：

formatItem: function (data) {
    if (data.name != null) {
        return data.name + '_' + data.uid + '(' + data.ip + ')';
    }
}
1
2
3
4
5

C、自定义修改样式显示

主要之前的样式其实也还不错，但是宽度最大限制了300px,要是自定义的显示文本过长就不好看了，所以我修改了一下selectpage.css对应的li的宽度和上面的框统一宽度，另外鼠标移上去有深色背景白色字，但是并不是所有的界面都适配，所以针对hover后的样式及行高我也改了一下，如下所示原生的和修改后的对比效果：

当然具体的效果可以根据自己来定制化。

4、写在最后

如有需要demo的可以一键三连留下您的邮箱，我们一起交流学习更多前端的小工具！