基于jquery的多功能单选下拉框插件(原创)

查看演示立即下载

插件描述：仿下拉框插件,该组件基于jquery开发，对单选下拉框功能进行整合，能够满足大部分功能需要。

更新时间：2021-06-27 23:28:48

基于jquery的多功能单选下拉框组件

1、前言

单选下拉框是系统开发中常用的组件，也是要求比较多的组件。最近就有一个项目各种改，一会儿要制定规则筛选匹配，一会儿要回车选中，一会儿要懒加载......与其网上各种搜合适的组件，不如自己写一个一劳永逸，更重要是的在功能实现上不受限于其他组件。该组件基于jquery开发，对单选下拉框功能进行整合，能够满足大部分功能需要。后续功能持续更新完善中。

2、提供功能

支持自定义下拉框右侧图标，图标基于font字体库设计,目前提供了arrow(箭头)和triangle(三角)两种模式 ,可扩展。
支持自定义key，value字段名。
支持前端动态添加全部选项。
支持默认选中。
支持输入筛选功能。其中包括是否区分大小写，根据筛选规则（以指定字符串开始匹配、以指定字符串结束匹配、存在即匹配）进行匹配，下拉选项列表展示方式（输入前展示、输入后展示）。
支持回车选中。根据回车选中规则(全匹配、模糊匹配)进行匹配。
支持数据懒加载。
支持通过鼠标上下键控制选项。
提供了获取选中key、获取选中value、刷新下拉数据的方法。
提供了点击、回车选中时的回调方法。

3、参数设置

this.defaultConfig = {
      // 默认父元素
      parentEleClass: "selectSearchArea",
      // 后缀图标，默认arrow；
      // 目前提供arrow(箭头)和triangle(三角)两种模式，可根据项目情况自行拓展
      // 拓展可以添加对应的font，提供一对class icon-${suffixIcon}-top && icon-${suffixIcon}-bottom
      suffixIcon: "arrow",
      // 下拉数组,用于下拉选项的显示
      selectList: [],
      // 下拉选项key值字段, 默认key
      keyField: "key",
      // 下拉选项value值字段, 默认value
      valueField: "value",
      // 输入查询相关配置
      searchSupportOption: {
        // 是否支持输入查询，默认支持，默认值true
        support: true,
        // 是否区分大小写进行匹配, 默认区分，默认值true
        sensitive: true,
        // 匹配方式
        // start: 检测字符串是否以指定的子字符串开始
        // end：检测字符串是否以指定的子字符串结束
        // all: 检索字符串在整个查询中存在
        matchedCondition: "all",
        // 输入为空时是否显示下拉选项
        isViewItemsWhenNoInput: true,
      },
      // 是否需要前端添加全部选项
      isNeedAll: false,
      // 全部选项配置内容
      allOptions: {
        // 全部选项key值，不能为空
        allKeyData: "all",
        // 全部选项value值
        allValueData: "全部",
      },
      defaultSelect: "",
      // 回车相关配置
      enterSelectSupportOption: {
        // 是否支持回车选中， 默认支持，默认值true
        support: true,
        // 支持回车选中情况下定义的选中规则， 默认值 part
        // 目前提供complete(完全匹配) 和 part(部分匹配)两种模式，已存在键盘上、下移键选中
        // complete情况下会根据当前输入文本完全匹配下拉选项的文本，当存在多个选项匹配时，默认选中第一个
        // part情况下会根据当前输入文本模糊匹配，当存在多个选项匹配时，默认选中第一个
        // 优先级：已存在通过键盘上、下键选中的选项 > methods
        methods: "part",
      },
      // 懒加载相关配置
      lazyLoadSupportOption: {
        // 是否支持懒加载, 默认false
        support: false,
        // 下拉数量
        total: 0,
        // 懒加载时调用的方法，由外部定义。需要返回一个Promise()对象，其中resolve()返回的必须是数组。
        lazyloadCallback: () => {},
        // 需要重新刷新数据时的回调方法，由外部定义。需要返回一个Promise()对象，其中resolve()返回的必须是数组
        // 调用该方法时需要重置原引入文件中的js变量(分页等)，返回刷新数据
        reloadCallback: () => {}
      },
    };

4、提供方法

getKey()：获取当前选中选项key值。
getValue()：获取当前选中选项的value值。
setKey()：给当前下拉框赋值，只能是存在的key值。
refresh(): 重置/刷新/清空列表方法，传入下拉选项数组。
setLazyLoadDataTotal()：使用懒加载时给懒加载数量total赋值(一般情况下不需要用到)。
change(): 提供了点击、回车选中的回调方法，可用于外部的数据处理、页面刷新等。

5、基本使用

引入jquery、/prod/css/multiFunctionSelect.css、/prod/font/iconfont.css,/prod/js/multiFunctionSelect.min.js。

<link rel="stylesheet" href="./font/iconfont.css"/>
<link rel="stylesheet" href="./css/multiFunctionSelect.css" />
<script type="text/javascript" src="../lib/jquery/jquery-1.10.0.js"></script>
<body>
  ...
 </dody>
<script type="text/javascript" src="./dist/multiFunctionSelect.min.js"></script>

获取dom后调用MultiFunctionSelect传入对应参数即可。

var demo0 = $("#demo0").MultiFunctionSelect({
    selectList: data1,
    keyField: "key",
    valueField: "value",
    searchSupportOption: {
      support: false
    }
});

具体用法及实现demo见index.html

6、备注

关于懒加载的设计，这里只提供了监听滚动条触底后动态添加dom的基础方法，数据结果完全由外部定义方法获取。

之前也有考虑过内置ajax然后完全由multiFunctionSelect内部做处理的方式，但是最后否决了，这样做有很多弊端。

1. 各项目对ajax的配置并非相同，例如请求头设置、参数设置等，并且部分项目返回xml、protobuf等数据格式需要进行二次处理，无法做到通用性。

2.避免不必要的数据交互，例如前端分页的实现，一次请求所有数据，懒加载时仅需要前端筛选。

3.更重要让使用者能自己进行更多的逻辑处理，不受限于该组件。

使用上也很简单，使用者仅需提供lazyloadCallback、reloadCallback两个方法以及total值即可。lazyloadCallback用于加载时提供相应数据，reloadCallback会在初始化时获取数据、以及输入时重置数据，并且重置外部定义的变量(例如分页等)。组件期望调用lazyloadCallback、reloadCallback方法后返回值是个Promise，multiFunctionSelect内部已经做了同步处理。

lazyloadCallback()、reloadCallback() 返回的数据格式为{ data: [], total: Number };

前端分页实现demo:

var dzdthList；
function initSelectData = async function() {
  dzdthList = await getAllData();
  var demo = $("#demo").MultiFunctionSelect({
            lazyLoadSupportOption: {
                support: true,
                total: 0,
                lazyloadCallback: lazyloadCallback,
                reloadCallback: reloadCallback,
            }
        })
  lazyloadOptions.total = dzdthList.length;
}  
// 配置懒加载使用到的相关变量
var lazyloadOptions = {
  total: 0,
  pageSize: 50,
  pageNum: 1,
  curLoadData: []
}
// 触底加载方法
function lazyloadCallback() {
  return new Promise(function(resolve) {
    lazyloadOptions.pageNum ++;
    var itemsArr = getSliceData(lazyloadOptions.curLoadData,(lazyloadOptions.pageNum - 1) * lazyloadOptions.pageSize ,  lazyloadOptions.pageNum * lazyloadOptions.pageSize);
    resolve({ data:itemsArr, total: lazyloadOptions.total })
  })
}
// 懒加载reload方法
function reloadCallback(innerText) {
  return new Promise(function(resolve) {
    lazyloadOptions.pageNum = 1;
    lazyloadOptions.curLoadData = innerText ? dzdthList.filter(item => item.ZBCJ.toLowerCase().indexOf(innerText.toLowerCase()) > -1) : dzdthList;
    lazyloadOptions.total = lazyloadOptions.curLoadData.length;
    var itemsArr = getSliceData(lazyloadOptions.curLoadData,0,  lazyloadOptions.pageSize);
    resolve({ data:itemsArr, total: lazyloadOptions.total })
  })
}
// 数组分割方法
function getSliceData(arr, startIndex, endIndex) {
  return arr.slice(startIndex, endIndex)
}

浏览器兼容上，已经适配了主流浏览器，例如谷歌、safari、360、火狐、IE10+等。

如果浏览器提示$(...).MultiFunctionSelect() is not a function 错误，请确认当前的$是否是已经添加方法的对象。

如有问题或者建议请联系，邮箱：hviker2021@126.com

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效：移动端app优惠券页面模板
下一个特效： jQuery一对一商品映射比较