jQuery Editable Select可搜索下拉选项框

前言

可搜索的下拉选项框

源码地址:https://github.com/indrimuska/jquery-editable-select

可搜索的下拉选项框

引入依赖

<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="//rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.js"></script>
<link href="//rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.css" rel="stylesheet">

基本使用

<select id="editable-select"><option>Alfa Romeo</option><option>Audi</option><option>BMW</option><option>Citroen</option>
</select><script type="text/javascript">$('#editable-select').editableSelect();
</script>

在这里插入图片描述

有选中项的select

<select id="editable-select"><option>Alfa Romeo</option><option selected>Audi</option><option>BMW</option><option>Citroen</option>
</select><script type="text/javascript">$('#editable-select').editableSelect();
</script>

在这里插入图片描述

option中带有标签

<select id="editable-select"><option>Alfa Romeo - &lt;small&gt;&lt;a href="http://www.alfaromeo.com/"&gt;www.alfaromeo.com&lt;/a&gt;&lt;/small&gt;</option><option>Audi - &lt;small&gt;&lt;a href="http://www.audi.com/"&gt;www.audi.com&lt;/a&gt;&lt;/small&gt;</option><option>BMW - &lt;small&gt;&lt;a href="http://www.bmw.com/"&gt;www.bmw.com&lt;/a&gt;&lt;/small&gt;</option><option>Citroen - &lt;small&gt;&lt;a href="http://www.citroen.com/"&gt;www.citroen.com&lt;/a&gt;&lt;/small&gt;</option><script type="text/javascript">$('#editable-select').editableSelect();
</script>