前端——》Layui-下拉多选框拼音模糊匹配

话不多说先看效果：

此效果是基于layui使用formselect4完成的，实现的几个必要条件是

1，开启select的属性

2，引入正确的js（这个着实找了大半天）

3，复制粘贴jquery代码

不足之处望提意见。

------------------------分割线-------------------------------

html部分

<label class="layui-form-label">省份</label>
<div class="layui-input-block"><!--xm-select是下拉多选框的id,xm-select-search-type="dl"表示文字搜索框放置的位置，提前须开启xm-select-search--><select xm-select="regionSelect" xm-select-direction="down" xm-select-search xm-select-search-type="dl"></select>
</div>

js部分

<!--具体的js地址已上传到头顶资源处，鼠标滚轮往上滑，下载后引入-->
<script type="text/javascript" src="../assets/js-pinyin.js"></script>

JQuery部分

function loadProvince(del, curr) {$.ajax({url: "../assets/city.json",type: 'get',dataType: 'json',success: function (res) {var arr = [];$(res).each(function (idx, value) {arr.push({name: value.province,type: "optgroup"})$(value.city).each(function (id, val) {arr.push({name: val.city_name,value: val.city_name,province:value.province})})});formSelects.data('regionSelect', 'local', {arr: arr});formSelects.value('regionSelect', curr);/*过滤*/formSelects.filter('regionSelect', function(id, inputVal, val, isDisabled){if(/*这段代码是检查省份是否包含*/PY.fullPY(val.province).toLowerCase().indexOf(inputVal) != -1 ||    //拼音全拼是否包含PY.fullPY(val.province, true).indexOf(inputVal) != -1 ||            //拼音简拼是否包含val.province.indexOf(inputVal) != -1||/*这段代码是检查城市是否包含*/PY.fullPY(val.name).toLowerCase().indexOf(inputVal) != -1 ||    //拼音全拼是否包含PY.fullPY(val.name, true).indexOf(inputVal) != -1 ||            //拼音简拼是否包含val.name.indexOf(inputVal) != -1                                //文本是否包含){return false;}/*return true表示选项被过滤，隐藏不显示*/return true;});}})}

前端——》Layui-下拉多选框拼音模糊匹配相关推荐

layui下拉多选框xm-select
1. 示例 2. 引入xm-select.js 下载地址:xm-select: 基于Layui, 下拉选择框的多选解决方案 3. 语法 <div id="demo2" cla ...
tkinter自定义下拉多选框
使用tkinter实现下拉多选框效果如图: 1.选择一些选项: 2.全选选项: 代码如下: import tkinterfrom ComBoPicker import Combopickerlist ...
el select 清空_解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
这是一个项目中常见的需求,el-select 为下拉多选,默认值不可删除,或者指定值不可删除. 实现效果: el-select 如下源码中 tag closable 属性为 el-select 的 d ...
flask-wtf优雅实现下拉多选框
flask-wtf实现下拉多选框一般实现一般情况下,我们用flask-wtf来实现下拉多选框的时候,大概是这样子操作的定义Form类 forms.py from flask_wtf import ...
html 下拉多选框代码,js实现下拉复选框效果（代码实例）
本章给大家带来用js实现下拉复选框效果(代码实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 先看看效果: 下面我们看看代码: HTML代码: HTML CSS JavaScri ...
easyui下拉多选框的创建、获取值、赋值
EasyUI后台往前端赋值的时候要用JSON格式,不然容易引起特殊符号导致的不显示 easyui下拉多选Demo: <select class="easyui-combobox&quo ...
Java - EasyExcel结合VBA实现Excel导出下拉多选框与单选框
需求:导出一个带有单选下拉框与多选下拉框的excel模板思路:1.使用VBA脚本设置带有多选框的模板2.使用EasyExcel给字段填充单选下拉框数据源一.创建带有多选框宏的excel模板 *.x ...
DevExpress下拉多选框 CheckComboboxEdit、CheckedListBoxControl
CheckComboboxEdit //清空项 checkedComboBoxEdit1.Properties.Items.Clear(); //自定义数组 ...
在 jquery repeater 中添加设置日期,下拉,复选框等控件
JQueryElement 更新到了 3.5.1, 今天给大家主要讲下如何在 Repeater 的模板中添加设置一些控件. 由于精力有限, 不能在多个博客中保证文章的同步, 可在如下地址查看最新内容, ...
java 下拉复选框_JAVA个人小程序GUI篇-收银（标签、按钮、复选框、下拉标、文本域、表格······）...
1 //导入包 2 importjava.awt.BorderLayout;3 importjava.awt.EventQueue;4 5 importjavax.swing.JFrame;6 imp ...

前端——》Layui-下拉多选框拼音模糊匹配

前端——》Layui-下拉多选框拼音模糊匹配相关推荐

最新文章

热门文章