element-ui中el-select下拉框数据过多，用pinyin-match实现拼音、首字母、汉字等模糊搜索

人狠话不多，上图！

pinyin-match库

也是项目需要，由于下拉框的数据过多，使用人员不好选择，就做个拼音，大小写字母以及汉字的模糊搜索，结果就找到来这个 pinyin-match库，能够使用拼音快速检索目标。特好用的，这个库的作者是个好心人啊，既然好东西也不能藏着，分享给大家！

在线演示：http://laosep.top/pinyin-match/

在项目中的使用步骤

第一步：安装pinyin-match

// 安装 pinyin-matchnpm install pinyin-match --save

第二步：在需要的组件中使用

利用el-select的filterable 属性和filter-method方法使用模糊搜索

<template><el-select v-model="formInline.brandId" @change="changeBrand" filterable :filter-method="pinyingMatch" placeholder="请选择"  style="width: 180px" ><el-option :label="item.label" :value="item.value" v-for="(item,index ) in brand" :key="item.value"></el-option></el-select>
</template><script>export default{data(){return{brand:[],//下拉框所有数据copyBrand:[]}},methods:{//获取所有的品牌async getBrand(){const response = await reqLimitBranch()this.brand = response.data//把所有的品牌在赋值copyBrandthis.copyBrand = this.brand},//下拉框设置拼音模糊搜索pinyingMatch(val){const pinyingMatch = require('pinyin-match')if(val){var result = []//this.copyBrand.forEach( e => {var m = pinyingMatch.match(e.label, val)if( m){result.push(e)}})//搜索到相应的数据就把符合条件的n个数据赋值brand this.brand = result}else{//没有搜索到数据，就还展示所有的brand this.brand = this.copyBrand}},}}</script>

这样就可以实现下拉框选择器的拼音、字母以及汉字的模糊搜索啦！试一下，有问题，可以交流哦！

element-ui中el-select下拉框数据过多，用pinyin-match实现拼音、首字母、汉字等模糊搜索相关推荐

TP中给select下拉框选中的内容搜索选中seleted
开发某个搜索功能时,在select下拉框选中条件后,单击搜索后总是重置下拉框条件,不能固定之前选中的条件.因此使用TP框架中的IF标签来实现. 代码如下: <select name=" ...
在hta中使用select下拉框
由于要做一个纯静态的客户端项目,又考虑到成本和使用场景,所以选择hta. hta由于历史原因,逐步被淘汰,网上的资料少得可怜,hta对新的前端技术支持非常差劲. 进入正题. 1.整个项目采用的是boo ...
vue select下拉框数据v-model绑定默认不显示的问题
提高页面加载速度,前端代码注意的关键点今天遇到了一个问题,就是我循环出select内的数据以后,发现原本默认显示第一条的select框变成了空白,要选择后才有显示.我写的原始代码如下: <sel ...
angular:带验证功能的formControlName的select下拉框数据充填
解决方法: 使用一个自定义函数进行设定. FormGroup定义之后,进行初始化,用于表单验证. ngOnInit(): void {console.log("----->" ...
elementui下拉框选择图片_Element UI系列：Select下拉框实现默认选择
[编程题目]一个整数数组,长度为 n,将其分为 m 份,使各份的和相等,求 m 的最大值★★ (自己没有做出来!!) 45.雅虎(运算.矩阵): 2.一个整数数组,长度为 n,将其分为 m 份,使各份 ...
Vue中select下拉框的默认选中项的三种情况
在Vue中使用select下拉框主要靠的是 v-model 来绑定选项 option 的 value 值. select下拉框在界面的展示,我们都希望看到框中有一个值而不是空白,比如显示 &qu ...
antd vue 多个下拉联动_antd中select下拉框值为对象选中的问题
使用antd中的select下拉框,遇到个小问题,后台管理系统中,使用下拉框,一般不会是简单的就直接使用select中的value值,而是会使用id或者value中文对应的keyword,并且这个在o ...
layui 下拉框空选项不显示_layui下select下拉框不显示或没有效果
Layui会对select.checkbox.radio等原始元素隐藏,从而进行美化修饰处理.但这需要依赖于form组件,所以你必须加载 form,并且执行一个实例.值得注意的是:导航的Hover效果 ...
iview select选中值取值_完美解决iview 的select下拉框选项错位的问题
在使用iview的过程中,我遇到这样一个问题,在Model中使用select下拉框组件.但是当弹出框超过一屏需要滚动时,select的下拉选项会出现错位(下图1为正常,图2为滚动后,下拉选项错位.) ...