select标签添加模糊搜索功能 select2插件的简单使用

前言

select标签下拉列表里的数据条数太多，不好找，希望能对其添加一个模糊搜索的功能，找到了一个select2的插件解决了问题。现在简单整理其使用

select2：基于jQuery的下拉列表美化插件

官 网：http://select2.github.io/

github：https://github.com/select2/select2 （css和js文件在dist目录中）

简单使用步骤

引入jQuery.js

<script src="{path}/jquery.min.js">script>

引入select2的css和js

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js">script>


<link rel="stylesheet" href="{path}/select2.min.css"/>
<script src="{path}/select2.min.js">script>

选择select标签调用select2方法

html:

<select class="select-example">
    <option value="1">北京大学option>
    <option value="2">北京工业大学option>
    <option value="3">哈尔滨工业大学option>
select>

js:

$(document).ready(function() {
    $('.select-example').select2();
});

效果