JS组件系列——select2下拉框的搜索

基本使用

Select2是一款基于JQuery的下拉列表插件，主要用来优化select，支持单选和多选，同时也支持分组显示、列表检索、远程获取数据等众多好用的功能。项目地址：https://select2.org/

需要用到的JS和CSS文件位于项目代码下的dist目录中，需要将这个目录中的对应文件放入你的项目里，这一步不赘述

第一步、引入CSS/JS文件，由于Select2是基于Jquery的，所以要先引入Jquery，这里我们都直接引入CDN的地址

<!-- 加载 Jquery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<!-- 加载 Select2 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>

第二步、创建一个html页面，body内容:      

  <div>
            <select class="singleSelect" style="width: 200px;">
                <option value="">--请选择--</option>
                <option value="">阿里</option>
                <option value="">阿姨</option>
                <option value="">江南</option>
                <option value="">杭州</option>
                <option value="">无锡</option>
                <option value="">上海</option>
            </select>

        </div>

第三步、书写js脚本，调用我们的js方法    

<script type="text/javascript">

        $(document).ready(function() {
                $('.singleSelect').select2();

            });

</script>

第四步、效果图