Select搜索下拉框

1.引入下拉框搜索所需js文件和css文件：
下载地址（免费）：中文搜索下载

     <%--下拉框支持搜索--%><script type="text/javascript" src="<%= basePath %>js/searchableSelect/searchableSelect.js"></script><link rel="stylesheet" href="<%= basePath %>js/searchableSelect/searchableSelect.css"/>

2.绑定标签和js：

    $(function () {$('#select').searchableSelect();});

3.中文搜索效果图：

4.拓展：目前仅支持中文搜索，可通过以下操作后支持英文首拼搜索：

5.引入拼音搜索的js文件
下载地址（免费）：拼音搜索

 <script type="text/javascript" src="<%= basePath %>js/file-input/bootstrap-filestyle.min.js"></script><script type="text/javascript" src="<%= basePath %>js/jquery-form/jquery.form.js"></script>

重写第一个引入searchableSelect.js的createPseudo函数：替换为:

 $.expr[":"].searchableSelectContains = $.expr.createPseudo(function (arg) {return function (elem) {var pinyin = ConvertPinyin($(elem).text());var firstWord = makePy($(elem).text())[0];if ($(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0)return true;if (pinyin.toUpperCase().indexOf(arg.toUpperCase()) >= 0)return true;if (firstWord.toUpperCase().indexOf(arg.toUpperCase()) >= 0)return true;return false;};});

7.首拼搜索效果图：

中英文搜索可按需选择，引入十分方便！

Select下拉框支持搜索，jq插件，使用超级简单！相关推荐

Vue element中select下拉框支持手输搜索也支持下拉选择
需要一个可以手输也可以选择的下拉框代码如下: filterable 是可以搜索的 <el-select v-model="table.queryParams.prequalifica ...
select下拉框添加搜索功能
需要引用jquery插件select2 引入css <link href="/select2/4.0.5/css/select2.min.css" rel="sty ...
element-UI select下拉框加搜索拼音搜索滚动加载新的数据
DOM 写法 <el-form-itemlabel="样品名称"prop="sampleName"label-width="150"& ...
html下拉菜单图片,JS+CSS 制作的超级简单的下拉菜单附图
先看效果: 代码: Good Test function showSubMenu(SubMenu) { document.getElementById(SubMenu).style.display = ...
select下拉框美化
http://dl.dbank.com/c04csxtesr 基本用法单选下拉框的写法与传统的一样.支持TAB键打开和上下箭头选择option.支持onchange事件,见下面选中项:2 代码如下 ...
html 下拉框高度,如何自定义设置select下拉框高度的优化方法
在项目开发中经常会遇到select下拉框优化问题,默认的样式简直难看到死,所以大家都会想到去设置select高度问题,当然一些组件或者插件也可以实现对其完美优化,我之前的一篇文章也写到了相关优化方法& ...
select下拉框分组展示插件的使用--(select-mania插件的使用)
一.概述在web项目中很多地方用到下拉框,原生的下拉框比较丑陋,之前的文章中介绍过一款用来美化下拉框的插件可以参考: 手把手教你--jquery chosen插件的使用和API(html下拉框美化) ...
TP中给select下拉框选中的内容搜索选中seleted
开发某个搜索功能时,在select下拉框选中条件后,单击搜索后总是重置下拉框条件,不能固定之前选中的条件.因此使用TP框架中的IF标签来实现. 代码如下: <select name=" ...
html5 下拉框美化,纯js超酷select下拉框美化插件
tastySelect是一款纯js超酷select下拉框美化插件.tastySelect下拉框插件支持多选,内置两种主题,使用CSS3动画过渡效果,整体设计时尚大方. 使用方法在页面中引入tasty ...

Select下拉框支持搜索，jq插件，使用超级简单！

Select搜索下拉框

中英文搜索可按需选择，引入十分方便！

Select下拉框支持搜索，jq插件，使用超级简单！相关推荐

最新文章

热门文章