input动态搜索下拉框组件input-dynamic-select使用(一)

在做项目的时候，经常会用到动态搜索下拉框的需求，网上也没有找到很好的组件来达到这个目的，于是自己开发了一个这样的组件。该组件将更多的配置权给用户，用户可以根据自己的需求进行配置这个动态下拉框。下面先简单介绍这个组件的整体使用方法：

git代码库：https://github.com/yog-zhang/input-dynamic-select.git

如发现问题欢迎交流指正！

1.下载安装(两种方式)

（1） 下载node包

使用命令 npm install input-dynamic-select --save 安装依赖包

在需要使用的代码中导入该组件

import DSelect from 'input-dynamic-select'

（2）或全局引入 

<script src='./dSelect.js'></script>

2. 使用

（1）创建组件对象

let dSelect = new DSelect(id, styleArray)

创建组件方法的两个参数说明：

id: 绑定的input输入框的id选择器名称，如下面的'inputId'；此项为必填项

styleArray: 下拉框的类配置数组，每个元素都是JSON对象，将整个下拉框显示样式完全交给用户配置，此项可以选填，里面的各个元素也可以选填，如果为null，对应的有默认样式，如果默认样式达不到要求，只能自己手动设置样式了。

styleArray[0]：配置下拉框最外层节点（即ul元素）的类样式，对应下面的ul元素的类选择器'iuds-selectPanel-0'的样式

styleArray[1]：配置下拉框最外层节点的直接子代节点（即li元素）的样式，对应下面的li元素的样式 

styleArray[2]：配置鼠标悬浮在下拉框最外层节点的直接子代节点（即li元素）的样式，对应下面悬浮在li元素上时的样式

styleArray[3]：配置下拉框最外层节点的直接子代节点包含的输入框关键字（即span）的样式，对应下面span元素的样式

创建的动态下拉框的html结构（只有ul元素节点是该组件动态创建的元素，其他是自己创建的）如下：

<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('inputId',
        [
            {
                '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'
            }
        ]
    )

运行渲染如下：

当然第二个元素可以选填，比如：

let dSelect = new DSelect('inputId',
        [
            {
                'list-style-type': 'none',
                'margin': '0',
                'padding': '0',
                'border': '1px solid #d9d9d9',
                'background-color': '#fff',
                'width': '160px',
                'height': '200px',
            },
            null,
            null,
            {
                'color': 'red',
                'font-weight': 'bolder'
            }
        ]
    )

数组的第二、三个元素填null，则对应会使用对应的默认样式，或者第二个参数数组为空：

let dSelect = new DSelect('inputId', null)

第二个参数为空，默认显然效果如下：

（2）设置数据列表

使用设置数据列表方法：

dSelect.setDataList(dataList)

参数说明：

dataList: 数组类型，从后台返回的数据列表，然后通过此方法在前端下拉框中展示

使用方法：

$.ajax({ 
    url: "xxxx", 
    success: function(data){
        dSelect.setDataList(data)
      }
    })

当然还是要配合input框的的输入关键字进行动态查询，所以需要将请求封装成一个方法，然后每当input框输入关键字查询，就会调用该方法，动态获取请求数据列表，下一节将会有个demo演示怎么使用

（3）获取下拉框的一些选项

dSelect.getOptions() //返回一个对象

通过该方法可以获取下拉框实例的一些配置选项：

{
    inputId: 绑定的input输入框id选择器名称
    selectClass: 动态下拉框类选择器名称
    inputNode: 绑定的input输入框节点
    selectNode: 动态下拉框节点
    dataList: 查询的数据列表
}

可以通过返回的配置对象进行相关的一些操作。

还有个demo具体介绍了使用方法，见 input动态搜索下拉框组件input-dynamic-select使用(二)