有搜索功能的下拉控件

时间 2018/6/29 17:26:24 加载中...

有搜索功能的下拉控件:


这里选用的是 Selectivity.js 

Selectivity.js 用法参照 https://arendjr.github.io/selectivity/

//取值:
$('#example-1').selectivity('val')


页面使用


页面引用:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link href="~/Scripts/selectivity-3.0.6/selectivity.css" rel="stylesheet" />
<link href="~/Scripts/selectivity-3.0.6/selectivity-jquery.min.css" rel="stylesheet" />
<script src="~/Scripts/selectivity-3.0.6/selectivity-jquery.min.js"></script>


页面:

<div id="dropdownCheck" class="selectivity-input example-input" tabindex="0">
    <div>
        <input type="text">
        <div>
            <div></div>
        </div>
        <i class="fa fa-sort-desc selectivity-caret"></i>
    </div>
</div>


JS:

$('#dropdownCheck').selectivity({
    allowClear: false,
    items: orgs,
    placeholder: '无选中项'
});

if (orgs && orgs.length > 0) {
    //赋值
    $('#dropdownCheck').selectivity('value', orgs[0].id);
}

$('#dropdownCheck').change(function () {
    //取值
    var currentData = $('#dropdownCheck').selectivity('data');
    console.log(currentData);
});


$.Selectivity.Locale.noResultsForTerm = function (term) {
    return '没有结果: <b>' + escape(term) + '</b>';
};


其它下拉参考:


https://select2.github.io/

http://www.jq22.com/yanshi7063

http://www.17sucai.com/pins/demo-show?id=26053

https://www.cnblogs.com/ZDPPU/p/6020160.html


扫码分享
版权说明
作者:SQBER
文章来源:http://blog.sqber.com/articles/dropdownlist-control.html
本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。