Element-UI下拉框select实现拼音搜索

需求：用户要求打出首字母就能搜索到内容，而不是打汉字。

需求分析：element自带搜索功能，支持汉字搜索，拼音的话需要引入第三方插件了。经过实验 pinyin-match完美实现。

解决过程：

首先安装 npm install pinyin-match --save
全局引用和局部引用皆可，这里我们使用了局部引用
import pinyin from "pinyin-match";
给select标签添加filterable :filter-method="pinyingMatch"
添加自定义搜索方法

pinyingMatch(val) {var that = thisconst pinyingMatch = require("pinyin-match");if (val) {var result = [];////注意otherList是内容数组，根据自己项目修改that.otherList.forEach((e) => {//注意，e.employeeName是遍历数组之后的键，按需修改var m = pinyingMatch.match(e.employeeName, val);// console.log(m);if (m) {result.push(e);}});//搜索到相应的数据就把符合条件的n个数据赋值brandthat.otherList = result;} else {//没有搜索到数据，就还展示所有的brand//copyotherList也是内容数组，为了显示全部，需要添加进之前的内容that.otherList = that.copyotherList;}}

成功解决。

发现了一些BUG：elementUI的下拉选择，每次点击×删除之后，v-model绑定的数据没有删除，所以要添加@clear方法，将data清空，同时把otherList还原。

又出现了Bug,每次输入拼音字母，输入框的字母都会消失，这是由于v-for遍历数组时加入了Index,每次Index变化就会导致这个情况，去掉即可。

Element-UI下拉框select实现拼音搜索相关推荐

vue下拉框值改变事件_vue和element ui 下拉框select的change事件
1 在线编辑测试工具编辑好代码后点击 run 即可 2 vue原生写法 2.1 html部分新增空 {{ drug.name }} 刪除尚未新增任何資料總金額:{{ totalMoney } ...
element ui 下拉框搜索功能
正常的下拉框就是这样的,但是临时加需求说需要下拉框里面的信息不存在或者太多的时候,希望自己搜索想要的数据嗯~听产品的~解决了一下代码如下 <el-select :placeholder=&q ...
element ui下拉框实现
<template><el-select v-model="value4" clearable placeholder="请选择">&l ...
element ui 下拉框选择年份
<template><div class="wrap"><el-select v-model="form.recentYear" ...
ng-alain 下拉框select设置多选mode: ‘multiple‘时的问题
ng-alain 下拉框select设置多选mode: 'multiple'时的问题 levelRels: {type: 'string',title: '上级外键关系',ui: {widget: ' ...
html下拉框变长,改变HTML下拉框SELECT选项的多种方法
原标题:改变HTML下拉框SELECT选项的多种方法提交表单后返回的HTML页面重新渲染,SELECT控件的value和selectedIndex属性都无法使下拉框保留提交表单前的状态. 复制代码 ...
获取下拉框select上次选择的值
获取下拉框select上次选择的值如图所示,如果我们需要获取select的当前选中项,直接用on-change事件直接返回就行,但有些情况下,我们需要获取上一次选中的值来做一些判断: <Row ...
chosen.jquery.js 、chosen-select 源码修改控制 chosen:updated 方法动态更新下拉框选项不更新搜索框值，chosen 实现远程搜索加载下拉选项
chosen.jquery.js .chosen-select 源码修改控制 chosen:updated 方法动态更新下拉框选项不更新搜索框值,chosen 实现远程搜索加载下拉选项 chosen. ...
vue+iview4.0 , vue+element实现下拉框可以自定义输入内容
前言: 最近10月的时候 iview4.0 更新了,但是一直在忙也没用到,正好因为要实现一个下拉框里面我要自定义输入内容的效果,element里面是有这个效果,antd里面没有,因为本项目用的ivie ...
layui 数据表格下拉框_layui-table-column-select（layui数据表格可搜索下拉框select）
layui-table-column-select 在layui table的基础上对表格列进行扩展:点击单元格显示可搜索下拉列表. 码云地址:https://gitee.com/kkk12/layu ...

Element-UI下拉框select实现拼音搜索

Element-UI下拉框select实现拼音搜索相关推荐

最新文章

热门文章