• Easy UI combobox实现类似 Select2的效果,下拉带搜索框


    一直在开发一个新系统,其中用Easy UI作为前端框架,少不了用 combobox做为一个 下拉控件,它支持 可编辑 模糊本地数据过滤,也可支持 不可编辑 下拉 选择的功能;

    $('#ID' ).combobox({
                data: CommonSelect.Return_Company('All'),
                valueField: 'ID',
                textField: 'Company_Name',
                prompt: '选择对应公司',
                editable: false/true
            });

    效果就是如下:

     但 实际需求中,对于下拉 又不想让他们编辑,但又方便他们查找 下拉数据,这时候 下拉 带搜索的 功能孕育出来了!
    Easy UI有组合控件一说,所以得用到这个,实现如下:

    $('#ID' ).combobox({
                data: CommonSelect.Return_Company('All'),
                valueField: 'ID',
                textField: 'Company_Name',
                prompt: '选择对应公司',
                editable: false,
                onBeforeLoad: function () {
                    var panel = $('#ID' ).combo('panel')
                    $("<input type="text" placeholder="  输入查询内容" style="100%;" onkeyup="CommonSelect.ChangeData_Company(this)" />").prependTo($(panel).parent("div"));
                }
            });

    CommonSelect.ChangeData_Company = function (Obj) {
    var val = Obj.value;
    var _CurrData = [];
    var _company = CommonSelect.Return_Company();
    _company.map(function (elem, index) {
    if (elem.Company_Name.indexOf(val) != -1) {
    _CurrData.push(elem);
    }
    });
    if (_CurrData.length == 0) {
    _CurrData.push({ ID: 0, Company_Name: '-请选择-' });
    }
    $('#ID').combobox('loadData', _CurrData);
    }

     

    效果图:

  • 相关阅读:
    小程序官方请求封装
    小程序天/小时/分秒倒计时封装
    小程序不定数量左右滑动中间放大轮播图效果
    小程序换行符检测换行
    小程序点击图片重新排序写法
    基于webuploader.js的单图片上传封装
    VMware Fusion 11 序列号
    Ionic 4 beta + Capacitor beta 尝鲜
    C语言学习笔记之动态分配数组空间
    C语言学习笔记之获取文件长度
  • 原文地址:https://www.cnblogs.com/666qq/p/11511418.html
Copyright © 2020-2023  润新知