在做项目的时候，经常会用到动态搜索下拉框的需求，网上也没有找到很好的组件来达到这个目的，于是自己开发了一个这样的组件。该组件将更多的配置权给用户，用户可以根据自己的需求进行配置这个动态下拉框。下面先简单介绍这个组件的整体使用方法：
git代码库：/yog-zhang/input-dynamic-select.git
如发现问题欢迎交流指正！
1.下载安装(两种方式)
（1）下载node包
使用命令 npminstallinput-dynamic-select--save 安装依赖包
在需要使用的代码中导入该组件
importDSelectfrom'input-dynamic-select'
（2）或全局引入
<scriptsrc='./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使用(二)
