input-dynamic-select简介
概述
在做项目的时候,经常会用到动态搜索下拉框的需求, 网上也没有找到很好的插件来达到这个目的,于是自己开发了一个这样的插件。 该插件将更多的配置权给用户,用户可以根据自己的需求进行配置这个动态下拉框
使用
下载安装
-
下载node包
npm install input-dynamic-select --save
在需要使用的代码中导入该插件import DSelect from 'input-dynamic-select'
-
或全局引入
<script src='./dSelect.js'></script>
创建插件对象
let dSelect = new DSelect(id, classArray)
说明
id: 绑定的input输入框的id选择器名称,如下面的'inputId'
classArray: 下拉框的类配置数组,每个元素都是JSON对象,将整个下拉框显示样式完全交给用户配置
classArray[0]:配置下拉框最外层节点(即ul元素)的类样式,对应下面的ul元素的类选择器'iuds-selectPanel-0'的样式
classArray[1]:配置下拉框最外层节点的直接子代节点(即li元素)的类样式,对应下面的li元素的样式
classArray[2]:配置鼠标悬浮在下拉框最外层节点的直接子代节点(即li元素)的类样式,对应下面悬浮在li元素上时的样式
classArray[3]:配置下拉框最外层节点的直接子代节点包含的输入框关键字(即span)的类样式,对应下面span元素的样式
动态下拉框的html结构如下:
<div style="width: 200px;">
<input type="text" id="inputId">
<ul class="iuds-selectPanel-0 iuds-selectPanel-common">
<li><span>男子</span>单打羽毛球</li>
<li><span>男子</span>双打乒乓球</li>
<li><span>男子</span>单打网球</li>
</ul>
</div>
备注:可以看到ul元素有两个类选择器,第一个类选择器是根据该下拉框是第几个被创建的实例,
如'iuds-selectPanel-0'则表示是第一个被创建的下拉框实例,所以后面是索引'0',前面部分的名字是固定的;
第二个类选择器名字是固定的,所有的下拉框实例共同的类选择器都是'iuds-selectPanel-common',
所以可以通过这个类选择器对所有的下拉框设置共同的样式
例如:
let dSelect = new DSelect('inputNode',
[
{
'list-style-type': 'none',
'margin': '0',
'padding': '0',
'border': '1px solid #d9d9d9',
'background-color': '#fff',
'width': '160px',
'height': '200px',
},
{
'padding-left': '5px',
'line-height': '30px'
},
{
'background-color': '#d9d9d9',
'cursor': 'pointer'
},
{
'color': 'red',
'font-weight': 'bolder'
}
]
)
设置数据列表
dSelect.setDataList(dataList)
说明:
dataList: 数组类型,传入从后台返回的数据
例如:
$.ajax({
url: "xxxx",
success: function(data){
dSelect.setDataList(data)
}
})
当然这是要配合input框的的输入进行动态查询,所以需要将请求封装成一个方法, 然后每当input框输入关键字查询,就会调用该方法,动态获取请求数据列表
获取下拉框的一些选项
dSelect.getOptions()
说明:
返回的是一个对象:
{
inputId: 绑定的input输入框id选择器名称
instanceSeq: 下拉框实例化时的序号
selectClass: 动态下拉框类选择器名称
inputNode: 绑定的input输入框节点
selectNode: 动态下拉框节点
dataList: 查询的数据列表
}