element拼音模糊搜索

最新推荐文章于 2024-06-29 14:25:39 发布
最新推荐文章于 2024-06-29 14:25:39 发布
阅读量786 收藏 2
点赞数 1
分类专栏： Element-UI Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46021847/article/details/109360909
版权
本文介绍了如何在Vue项目中结合Element UI库实现拼音模糊搜索功能，包括安装必要的依赖，引用组件，关键代码的编写以及示例演示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在这里插入图片描述

1.安装依赖（npm有问题就用cnpm）

npm install pinyin-match --save 
cnpm install pinyin-match --save

2.引用

import pinyin from 'pinyin-match'

3.关键代码

pinyin.match(data, value); //data匹配的内容，value输入的内容

4.示例

<template>
    <div>
        <el-input
                placeholder="输入关键字进行过
最低0.47元/天 解锁文章
前端——》vue中element分组+搜索+模糊匹配多选下拉框
叙传
01-06 7060
先上效果图： 这个功能实现起来其实不是很难，主要有几处细节需要注意 1，vue中js模块的导出 2，linq的使用 3，一级分组和二级分组的业务逻辑处理 主要实现步骤如下： 一：准备linq 1，安装linq。 npm install linq 2，在main.js中引用 import linq from 'linq'; Vue.prototype.Enumera...
select2支持拼音检索
05-30
3. **处理拼音模糊匹配**：在上面的示例中，我们使用了 `matcher` 函数来比较用户输入的拼音和选项的拼音。这里实现了全字母匹配，但实际应用中，用户可能只输入部分拼音或拼音首字母。因此，我们需要考虑拼音的模糊...
vue实现城市选择拼音搜索
06-10
vue实现的城市选择，带拼音选择搜索，可以多次反复使用，数据直接请求本地的资源json数据直接请求本地的资源json
vue pinyin-match下拉框设置拼音模糊搜索
qq_43030908的博客
01-05 1307
<el-form-item label="姓名：" prop="substation"> <el-select v-model="formInline.substation" placeholder="全部" filterable value-key="id" :filter-method="pinyingSub" clearable @clear="clearSub" @change="getOrder
Vue使用ElementUi进行模糊搜索
qq_46158060的博客
08-16 3039
在ElementUi中，在带输入建议的输入框中进行搜索，发现只能通过首端匹配，如果输入的是非首字，将无法搜索。
SprintBoot+Vue+Elemnt-Ui 实现首拼模糊查询
l749951543的博客
08-19 1016
1.首先前端组件使用的是select选择器，要想实现首拼查询，需要调用后端的接口，所以，这里我们使用select选择器的远程搜索属性。启用远程搜索，需要将filterable和remote设置为true，同时传入一个remote-method。remote-method为一个Function，它会在输入值发生变化时调用，参数为当前输入值。在Element官网中，有对该控件利用搜索功能快速查找的详细说明（https://element.eleme.cn/#/zh-CN/component/select）。下图
vue+iview实现拼音、首字母、汉字模糊搜索
lianwenxiu的博客
07-01 8676
最近项目做的后台管理系统中，要求实现一个支持拼音、首字母和汉字模糊搜索的下拉框。项目是用vue+iview做的，iview中有select远程搜索。但是，iview框架也有弊病就是会将输入框中的输入值进行过滤，如果你搜英文的，ok是可以实现的，看人家例子准备的数据也是英文的，但咱要求的是中文也能搜索，首字母和拼音都支持。 输入中文，因为框架中是根据value取值的...
Select 选择器 模糊搜索
最新发布
03-30
好的，用户想了解如何实现Select选择器的模糊搜索功能，需要前后端的示例。首先，我需要理解模糊搜索的基本概念，即用户输入部分内容时，系统能动态匹配并显示相关选项。然后考虑前端和后端分别需要做什么。 前端...
select2中文选项通过拼音或者首字母快速定位选项.zip
07-13
在IT行业中，前端开发经常会遇到各种用户交互场景，如选择列表的筛选与定位。...在处理大量选项时，为了提高用户体验，我们...在实际应用中，可以根据项目需求进一步优化和扩展这个功能，比如支持模糊搜索、多音字处理等。
移动端城市模糊搜索（按拼音、汉字搜索），编译器:webstorm
04-08
通过VUE+pinyin4js实现城市模糊搜索，支持按 “拼音、汉字”搜索及“热门城市”快捷选取
vue中实现简易的输入框的模糊搜索，并渲染在页面。（附上代码示例）
weixin_50656154的博客
07-14 4072
（附代码示例）实现在输入框输入数据后，根据用户输入，查询已有的数据中相关的数据，并只显示出这些数据。
基于elementui的e-select、el-cascader拼音搜索
weixin_43787161的博客
06-29 318
基于elementui的e-select、el-cascader拼音搜索。
PinyinMatch实现拼音匹配，分词、缩写、多音字匹配能力
jyf_568的博客
05-22 1253
参考https://www.npmjs.com/package/pinyin-match npminstallpinyin-match--save constPinyinMatch=require('pinyin-match'); lettest='123曾经沧海难为水除却巫山不是云' PinyinMatch.match(test,'23曾');// [1, 3] 案例1：...
vue.js + element中el-select实现拼音匹配，分词、缩写、多音字匹配能力
li00828的博客
12-19 8102
因为项目需要，需要在element原有可搜索下拉框的基础上添加设置拼音简码即可跳出的功能 在网上搜了很多也没有发现跟element完美匹配的，就自己写了一种方法可以跟element完美匹配，话不多说，直接上流程 1、既然要用到拼音搜索，我们就需要一个拼音库，在这里我推荐一个第三方包：https://github.com/xmflswood/pinyin-match，在这里首先对这个包的开发者表...
element中el-select实现拼音搜索（el-autocomplete等下拉框搜索都可添加）
qq_35371821的博客
12-23 3299
1.安装依赖包 npm install pinyin-match --save 2.全局引用或局部引用 import pinyin from 'pinyin-match' 2.添加触发方法html如下 :filter-method="pinyinMatch" 3.编写pinyinMatch()方法 //注：Dept下拉框绑定的数组对象，copyDept是初始化copy的Dept pinyi...
Element-UI Select 下拉框 根据汉字拼音过滤选择选项（使用filter-method，filterable属性）
热门推荐
yanxiaomu的博客
05-29 1万+
在使用 Element-UI Select 组件时，遇到一个需求是根据汉字或汉字拼音来过滤选项，记录一下解决方案。 这里需要使用 Element-UI Select 组件的filter-method 和filterable属性。 另外需要使用 js 拼音库CnChar，这个库主要就是做汉字转拼音和汉字笔画数的。使用npm i cnchar 就可以安装使用啦，详细的使用CnChar...
element ui模糊搜索功能
01-23
### 如何在Element UI中实现模糊搜索功能 #### 使用`el-select`和`el-option` 为了实现在Element UI中的模糊搜索功能，可以利用`el-select`组件及其子组件`el-option`来创建一个带有自动完成特性的输入框。此特性允许用户通过输入关键字来进行筛选，并从下拉列表中选择合适的项目。 当配置好相应的属性之后，比如`filterable`使能过滤模式以及监听事件如`@keyup.native.enter`用于捕捉键盘操作触发特定行为时，便能够轻松构建起具有模糊匹配能力的选择器[^4]。 下面是一个具体的例子： ```html <template> <div> <!-- 报警点 --> <el-form-item label="报警点"> <el-select v-model="bjdSelect" ref="bjdSel" :disabled="isDisabled" filterable style="width: auto;" class="forms" popper-class="dropdown" placeholder="全部" @change="selectBjd" @keyup.native.enter="searchData1" @keydown.native.enter="hideBjd" > <el-option v-for="item in optionsBjdSel" :key="item.code" :label="item.name" :value="item.code" /> </el-select> </el-form-item> </div> </template> <script> export default { data() { return { bjdSelect: '', isDisabled: false, optionsBjdSel: [ { code: '001', name: 'Option One' }, { code: '002', name: 'Option Two' } ] }; }, methods: { selectBjd(value) {}, searchData1() {}, hideBjd(event) {} } }; </script> ``` 这段代码展示了如何定义一个可被用来执行模糊查询的选择控件。其中，`optionsBjdSel`包含了可供选择的数据源；而各个处理函数则负责响应用户的交互动作，例如改变选中项(`selectBjd`)或是按下回车键后的逻辑(`searchData1`, `hideBjd`)。 对于更复杂的场景，还可以结合自定义的`querySearch`方法进一步增强模糊搜索的功能。该方法接收两个参数——一个是代表当前查询字符串的对象`queryString`，另一个则是回调函数`cb`，它会携带经过筛选的结果集作为参数传递给调用者。这使得开发者可以根据实际需求灵活调整搜索算法[^5]。 ```javascript methods: { querySearch(queryString, cb) { let results; // 如果有输入，则基于输入内容过滤数组； // 否则返回原始数据。 results = this.options.filter(item => !queryString || item.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0); // 调用回调函数并将结果传入 cb(results); } } ``` 在这个基础上，可以通过修改`createFilter`方法来自定义更加精确或不同的匹配规则，从而满足不同应用场景下的特殊要求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值