我们在电商平台购买商品时,在商品列表页根据品牌、款式、价格范围等条件进行筛选查询,当点击某个条件时,在页面上会显示用户所选择的条件集合,并且将对应的符合条件的商品信息展示出来。那么今天我们使用jQuery来实现这一前端效果。 查看演示下载源码 HTML 首先,我们将查询条件分类,在页面中布置条件容器li.select-list和已选择的条件容器div.select-result。 <ul class="select"> <li class="select-list"> <dl…
August 30, 2017
jQuery插件:强大的下拉框插件-Select2
主页:https://select2.github.io/
项目:https://github.com/select2/select2
实例:https://select2.github.io/examples.html
select2是一个可以给你定制支持搜索、标签、远程数据集,无限滚动,以及其他常用功能的一个下拉框美化插件。总之,功能很强大。
配置
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>
基本使用
<script type="text/javascript"> $('select').select2(); </script>
单选框
<script type="text/javascript"> $(document).ready(function() { $(".js-example-basic-single").select2(); }); </script> <select class="js-example-basic-single"> <option value="AL">Alabama</option> ... <option value="WY">Wyoming</option> </select>
多选框
<script type="text/javascript"> $(".js-example-basic-multiple").select2(); </script> <select class="js-example-basic-multiple" multiple="multiple"> <option value="AL">Alabama</option> ... <option value="WY">Wyoming</option> </select>
提示信息
$(".js-example-placeholder-single").select2({ placeholder: "Select a state", allowClear: true //可以删除 }); $(".js-example-placeholder-multiple").select2({ placeholder: "Select a state" });
加载数据
1. 加载数组
<script type="text/javascript"> var data = [ { id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }]; $(".js-example-data-array").select2({ data: data }) $(".js-example-data-array-selected").select2({ data: data }) </script> <select class="js-example-data-array"></select> <select class="js-example-data-array-selected"> <option value="2" selected="selected">duplicate</option> </select>
2. 加载远程数据
$(".js-data-example-ajax").select2({ ajax: { url: "https://api.github.com/search/repositories", dataType: 'json', delay: 250, data: function (params) { return { q: params.term, // search term page: params.page }; }, processResults: function (data, params) { // parse the results into the format expected by Select2 // since we are using custom formatting functions we do not need to // alter the remote JSON data, except to indicate that infinite // scrolling can be used params.page = params.page || 1; return { results: data.items, pagination: { more: (params.page * 30) < data.total_count } }; }, cache: true }, escapeMarkup: function (markup) { return markup; }, // let our custom formatter work minimumInputLength: 1, templateResult: formatRepo, // omitted for brevity, see the source of this page templateSelection: formatRepoSelection // omitted for brevity, see the source of this page });
3. 禁用模式
$(".js-programmatic-enable").on("click", function () { $(".js-example-disabled").prop("disabled", false); $(".js-example-disabled-multi").prop("disabled", false); }); $(".js-programmatic-disable").on("click", function () { $(".js-example-disabled").prop("disabled", true); $(".js-example-disabled-multi").prop("disabled", true); });
4. 禁用结果
<select class="js-example-disabled-results"> <option value="one">First</option> <option value="two" disabled="disabled">Second (disabled)</option> <option value="three">Third</option> </select>
5. 限制个数
$(".js-example-basic-multiple-limit").select2({ maximumSelectionLength: 2 });
6. 隐藏搜索框
$(".js-example-basic-hide-search").select2({ minimumResultsForSearch: Infinity });
编程控制
1. DOM事件
change //选中或删除触发 select2:open //下拉框打开触发 select2:opening //下拉框打开之前 select2:close //下拉框关闭 select2:closing //下拉框关闭之前 select2:select //选中结果触发 select2:selecting //选中之前 select2:unselect //结果未选中 select2:unselecting //结果未选中之前
var $eventLog = $(".js-event-log"); var $eventSelect = $(".js-example-events"); $eventSelect.on("select2:open", function (e) { log("select2:open", e); }); $eventSelect.on("select2:close", function (e) { log("select2:close", e); }); $eventSelect.on("select2:select", function (e) { log("select2:select", e); }); $eventSelect.on("select2:unselect", function (e) { log("select2:unselect", e); }); $eventSelect.on("change", function (e) { log("change"); }); function log (name, evt) { if (!evt) { var args = "{}"; } else { var args = JSON.stringify(evt.params, function (key, value) { if (value && value.nodeName) return "[DOM node]"; if (value instanceof $.Event) return "[$.Event]"; return value; }); } var $e = $("<li>" + name + " -> " + args + "</li>"); $eventLog.append($e); $e.animate({ opacity: 1 }, 10000, 'linear', function () { $e.animate({ opacity: 0 }, 2000, 'linear', function () { $e.remove(); }); }); }
2. 自定义控制
var $example = $(".js-example-programmatic").select2(); var $exampleMulti = $(".js-example-programmatic-multi").select2(); $(".js-programmatic-set-val").on("click", function () { $example.val("CA").trigger("change"); }); $(".js-programmatic-open").on("click", function () { $example.select2("open"); }); $(".js-programmatic-close").on("click", function () { $example.select2("close"); }); $(".js-programmatic-init").on("click", function () { $example.select2(); }); $(".js-programmatic-destroy").on("click", function () { $example.select2("destroy"); }); $(".js-programmatic-multi-set-val").on("click", function () { $exampleMulti.val(["CA", "AL"]).trigger("change"); }); $(".js-programmatic-multi-clear").on("click", function () { $exampleMulti.val(null).trigger("change"); });
3. 标签支持
$(".js-example-tags").select2({ tags: true })
4. 自动标记
当我们输入值匹配成功后 键入空格就会自动标签化
$(".js-example-tokenizer").select2({ tags: true, tokenSeparators: [',', ' '] })
5. 自定义查找匹配
function matchStart (term, text) { if (text.toUpperCase().indexOf(term.toUpperCase()) == 0) { return true; } return false; } $.fn.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) { $(".js-example-matcher-start").select2({ matcher: oldMatcher(matchStart) }); });