input-dynamic-select

1.0.2 • Public • Published

input-dynamic-select简介

概述

在做项目的时候,经常会用到动态搜索下拉框的需求, 网上也没有找到很好的插件来达到这个目的,于是自己开发了一个这样的插件。 该插件将更多的配置权给用户,用户可以根据自己的需求进行配置这个动态下拉框

使用

下载安装

  1. 下载node包
    npm install input-dynamic-select --save 在需要使用的代码中导入该插件 import DSelect from 'input-dynamic-select'

  2. 或全局引入
    <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: 查询的数据列表
}

Package Sidebar

Install

npm i input-dynamic-select

Weekly Downloads

0

Version

1.0.2

License

ISC

Unpacked Size

14.8 kB

Total Files

3

Last publish

Collaborators

  • recluseness