Vue实现input框模糊搜索

最新推荐文章于 2024-07-26 16:15:39 发布
最新推荐文章于 2024-07-26 16:15:39 发布
阅读量6k 收藏 32
点赞数 4
分类专栏： vue element ui 文章标签： vue element ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42268364/article/details/97399019
版权
本文介绍了如何在Vue项目中结合Element UI库实现输入框的模糊搜索功能，并在2020年4月3日增加了搜索高亮显示的效果。通过在模板、data和computed属性中设置相关代码，实现了搜索结果显示的实时更新和高亮焦点。
摘要由CSDN通过智能技术生成

2020年4月3日新增搜索高亮功能

在template里面：

                          <el-input
                              class="inline-input"
                              placeholder="请输入检验项目"
                              suffix-icon="el-icon-search"
                              v-model="project"  //主要是这个
                              size="mini"
                            ></el-input>
    
                           <li
                                class="content-box"
                                v-for="(list,index) in filterData"
                                :key="index"
                                :title=
最低0.47元/天 解锁文章
前端李小白
关注
专栏目录
vue input输入框模糊查询的示例代码
12-29
Vue 模糊查询功能 原理：原生js的search() 方法，用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。如果没有找到任何匹配的子串，则返回 -1。 input输入框，模糊查询 <input type=...
vue实现Input输入框模糊查询方法
12-13
本文实例为大家分享了vue实现Input输入框模糊查询方法的具体代码，供大家参考，具体内容如下 原理：原生js的indexOf() 方法，该方法将从头到尾地检索数组，看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头（没有指定 start 参数时）。如果找到一个 item，则返回 item 的第一次出现的位置。开始位置的索引为 0。 如果在数组中没找到指定元素则返回 -1。 下面先看示例： 搜索前： 搜索后： 实现方法： methods:{ // 点击搜索工程 search(){ // 支持模糊查询 // this.xmgcqkJsonsData：用于搜
vue 实现模糊搜索功能，vue-element ui改编input模糊查询
热门推荐
wodebokecsdn的博客
10-30 2万+
 vue实现模糊搜索功能 根据输入的内容进行查找数据，然后展示含有输入内容的数据 &lt;input v-model="issue_content" v-on:input ="inputFunc" type="text" placeholder="如何修改密码"&gt; &lt;div class="serch_result" v-show="serch_result_
uniapp实现下拉框模糊查询
最新发布
qq_43677138的博客
07-26 780
uni-app实现下拉框模糊搜索
vue-input框-模糊查询
weixin_55903841的博客
10-25 843
vue-input框-模糊查询 1. 背景: 做数据管理平台(uni-app开发小程序)有个需求是根据输入的字段去匹配已有数据，匹配到的显示在页面上。本次先介绍纯前端实现模糊查询。 2.核心代码 <view class="top_box"> <view class="inputsearch"> <input type="text" value="" v-model="input_search" placeholder="搜索" /> &lt
vue 模糊查询demo
不断努力充实的博客
03-28 3038
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <input type="text" v-...
【Vue】二次封装elementUI自定义样式的input搜索框
Fortaro的博客
09-28 2947
二次封装elementUI，制作自定义样式的input搜索框
vue输入框使用模糊搜索功能的实现代码
10-15
2. **监听输入框值的变化**：通过`@input`事件监听输入值的变化，在事件处理函数（如`autoSearch`）中实现搜索逻辑。 3. **使用`indexOf`方法进行字符串搜索**：在`autoSearch`函数中，遍历数据列表，使用...
Vue3 模糊搜索
Dell_yan的博客
09-07 1386
button @click="ss">搜索3、vuex内的代码 ，includes模糊查询。搜索时要备份一下数据，否则数据会消失。
Vue 最简单的实现input 输入框的模糊查询（不使用后端接口）
Fxhani的博客
09-23 2803
Vue 模糊查询功能 原理：原生js的search() 方法，用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。如果没有找到任何匹配的子串，则返回 -1。 1. input输入框 <el-input placeholder="请您输入地址" v-model="value"></el-input> <i class="el-icon-search" @click="searchAdress"></i> 2. 循环的数据 <ul>
vue input输入框关键字筛选检索列表数据展示
10-16
主要为大家详细介绍了vue input输入框关键字筛选检索列表数据展示，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
可输入的下拉框 可以用来做模糊查询
12-16
可输入的下拉框 可以用来做模糊查询 可输入的下拉框 可以用来做模糊查询
vue实现输入框的模糊查询（节流函数的应用场景）
有梦想的咸鱼前端
09-04 4821
上一篇讲到了javascript的节流函数和防抖函数，那么我们在实际场合中该如何运用呢？ 　　首先，我们来理解一下：节流函数首先是节流，就是节约流量、内存的损耗，旨在提升性能，在高频率频发的事件中才会用到，比如：onresize，onmousemove，onscroll，oninput等事件中会用到节流函数；
Vue+ElementUI实现input框模糊查询提醒
qq_35943376的博客
03-05 3273
先是用了ElementUI中给的el-autocomplete例子： &lt;el-form-item&gt; &lt;el-autocomplete class="inline-input" v-model="tableData.name" :fetch-suggestions="querySearch" placeholder="请输入内容"&g
vue手动实现输入框模糊查询
NOyesNONO_的博客
10-26 803
【代码】vue手动实现输入框模糊查询。
69、vue实现输入框的模糊查找
sunnnnh的博客
09-26 773
一、思路： 为输入框添加@input事件，输入内容时触发响应的方法。该方法在数据库中匹配输入的内容，将匹配的数据存储到列表展示出来。 1. 为输入框添加@input事件，并通过v-model绑定数据。当输入内容时，触发@input中的事件search。 2. showList数组中存储了匹配到的数据，用于展示 3. 用到的数据项 实现的效果图： 二：完整代码： <template> <div> <el-inpu...
前端实现输入框实时搜索，【vue+el-input】
花椒和蕊的博客
07-21 5034
input搜索功能实现
vue中使用element ui的input框做一个带模糊搜索的输入框
hh3167253066的博客
09-05 1575
说不多说直接贴代码,在template里面： <el-autocomplete class="inline-input" v-model="disease" :fetch-suggestions="querySearch" placeholder="请输入疾病名称" :trigger-on-focus="false" //这个改为true就是激活即列出输入建议
vue实现搜索框模糊查询
08-25
在Vue中实现搜索框的模糊查询可以通过以下步骤来完成： 1. 在Vue组件的模板中，添加一个文本输入框(input)作为搜索框，使用`v-model`指令将搜索框的值绑定到Vue实例的数据中。例如： ```html <input type="text" v-model="searchKeyword" /> ``` 2. 在Vue实例中定义一个用于存储搜索关键字的数据属性，例如`searchKeyword`。 3. 在Vue组件的计算属性中，根据搜索关键字过滤需要显示的列表数据。假设你有一个名为`items`的数据数组，可以使用`filter`函数来实现模糊查询过滤。例如： ```javascript computed: { filteredItems() { return this.items.filter(item => { // 使用JavaScript的字符串方法includes进行模糊匹配 return item.name.includes(this.searchKeyword); }); } } ``` 在该示例中，假设`items`数组中的每个元素都有一个名为`name`的属性，根据该属性进行模糊查询过滤。 4. 在模板中使用过滤后的结果进行展示，例如使用`v-for`指令遍历`filteredItems`数组，并渲染相应的内容： ```html <ul> <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li> </ul> ``` 这样，在输入框中输入关键字时，会根据关键字动态过滤显示内容，实现搜索框的模糊查询效果。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值