有搜索功能的下拉控件


有搜索功能的下拉控件:
这里选用的是 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>'; };
其它下拉参考:
http://www.jq22.com/yanshi7063
http://www.17sucai.com/pins/demo-show?id=26053
https://www.cnblogs.com/ZDPPU/p/6020160.html
版权说明
作者:SQBER
本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
{0}
{5}
{1}
{2}回复
{4}
*昵称:
*邮箱:
个人站点:
*想说的话: