vue 实现搜索历史_vue实现搜索功能

最新推荐文章于 2024-08-12 14:37:56 发布

weixin_39674978

最新推荐文章于 2024-08-12 14:37:56 发布

阅读量658

点赞数

文章标签： vue 实现搜索历史

本文链接：https://blog.csdn.net/weixin_39674978/article/details/111844384

版权

本文介绍了如何在Vue中实现搜索功能，包括模板部分的展示和JavaScript处理搜索逻辑。通过监听搜索输入，过滤数据并实时更新搜索结果。同时讨论了在搜索框清空后如何处理显示的问题。

摘要由CSDN通过智能技术生成

vue实现搜索功能

template 部分

搜索

{ {item.contact_name}}
{ {item.address}}
{ {item.phone}}

{ {item.contact_name}}
{ {item.address}}
{ {item.phone}}

JS 部分

import { mapGetters } from "vuex";

import api from "../../api/axiosConfig.js";

export default {

data() {

return {

search: "",

// 原本展示数据

list: [],

// 搜索后的展示数据

searchData: []

};

components: {},

computed: {

...mapGetters(["getAddressList", "getLoginUser"])

created() {

// 获取的接口数据

this.getLis

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_39674978

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue实现搜索框记录搜索历史_Vue.js实现简易的搜索功能

weixin_39794347的博客

12-20

594

这个搜索功能的实现很简单，无论是方法还是逻辑(思路在文章末尾)，使用的仅仅只有filter和match这两个方法，那现在就上两个简易的demo吧！Demo1：输入框内容改变自动搜索HTML代码{{item}}VUE代码new Vue({el: "#app",data: {searchText: "",list: ["上路巩州遇虎熊","五百年前一场疯","腾宵又是孙悟空","失马鹰愁涧飞白龙","...

字符串大小比较的规则

04-03

字符串大小比较的规则, C、C#、java等高级语言的字符串比较规则

参与评论您还未登录，请先登录后发表或查看评论

vue3+Element Plus功能组件封装——条件搜索（输入框（可新增删除），下拉选择框，日期选择）

最新发布

布克吉的博客

08-12

558

后台管理做多了，会发现无非就是一些，表单和表格，没什么新东西，直接套模板即可，下次遇到直接用，别再重复造轮子了，多花点时间推升自己！

HBase入门

LitongZero的博客

12-29

387

HBase 安装单机环境 Centos7 Hbase 安装JDK yum install java-1.8.0-openjdk* -y 下载HBASE http://mirror.bit.edu.cn/apache/hbase/2.2.6/ 解压到Linux tar -xf hbase-1.2.8-bin.tar.gz cd hbase-2.2.6 修改JAVA_HOME配置文件 vim conf/hbase-env.sh // 注意这个是在CentOS上的java位置 export JAVA_H

vue实现搜索功能

grylf的博客

09-17

4万+

methods (要有一定的触发条件才能执行，如点击事件) <template> <div class="safetyInfo"> <input type="text" name="" id="" placeholder="搜索" v-model="search"/> <

Elasticsearch 通配符查询

小黑王HK

11-04

8076

通配符查询（wildcard query）匹配字段被通配符表达式（没有被分析）匹配的文档。支持的通配符为*（匹配任意字符序列，包括空字符序列）以及？（匹配任意单字符）。注意，此查询可能会很慢，它需要迭代许多字段值。为了防止极慢的通配符匹配，通配符字段值不能以一个通配符作为开头。通配符查询对应Lucene的WildcardQuery。 GET /_search { "query": { ...

Vue 实现输入框新增搜索历史记录功能

10-16

在本文中，我们将深入探讨如何在Vue框架中实现一个搜索输入框功能，此功能将能够记录用户的搜索历史，并能够将这些历史记录显示给用户，同时提供清除历史记录的选项。为达成此功能，我们将采用一个名为good-storage...

vue 实现搜索历史_vue项目搜索历史功能的实现

weixin_39636411的博客

12-22

388

播放器项目中歌曲搜素页面的首先需要在state定义搜索历史，在其中保存搜索历史state.js:// 搜索历史：searchHistory: []mutations中新增改变搜索历史的方法mutations.js:SET_SEARCH_HISTORY(state, history) {state.searchHistory = history}在actions中需要提交一个状态改变history，...

vue3_dev_tools.crx

12-19

在Vue3 DevTools的核心功能中，有以下几个重要的知识点： 1. **组件树**：Vue3 DevTools允许开发者查看应用程序的组件层级结构，包括每个组件的状态、属性、方法和生命周期钩子。这有助于理解组件间的通信和数据流...

ElasticSearch通配符查询（英文检索）

web15285868498的博客

03-25

1571

#如果你要查询的字段信息记得不太清楚, 我们也可以使用通配符 * GET /lib3/user/_search { "from":0, "size": 2, "_source": { "includes": "addr*", "excludes": ["name" , "bir*"] }, "query": { "match_all": {} } } ...

Elasticsearch：wildcard - 通配符搜索

Elastic 中国社区官方博客

09-01

2737

详细描述 Elasticsearch 中的通配符 wildcard 搜索。Elasticsearch 是一个分布式、免费和开放的搜索和分析引擎，适用于所有类型的数据，例如文本、数字、地理空间、结构化和非结构化数据。它基于 Apache Lucene 构建，Apache Lucene 是一个全文搜索引擎，可用于各种编程语言。由于其速度、可扩展性以及对不同类型内容进行索引的能力，Elasticsearch 已在多种用例中得到应用。

es 通配符查询java_用于elasticsearch中的通配符搜索的ngram

weixin_34033915的博客

03-04

1018

我正在尝试为最终用户提供搜索类型，这更像sqlserver。我能够为给定的SQL场景实现ES查询：select * from table where name like '%peter tom%' and type != 'xyz在ES中，我使用ngram tokenizer来达到预期的结果：PUT sample{"settings": {"analysis": {"analyzer": {"my...

ElasticSearch通配符 * 查询（英文检索）

热门推荐

ywl470812087的博客

03-16

10万+

JavaScript和ES6中字符串、数组对象的比较

一个喜欢面朝大海，等待春暖花开的小姑娘

09-20

3276

（一）字符串对象的比较（二）数组对象的比较

es 实现字段之间进行比对

ywb201314的专栏

05-30

1963

sql 例如: select * from user t where t.count = t.num; es 查询语句如下: { "query": { "bool": { "must": { "script": { "script": { "source": "doc['fieldA'].value >= doc['fieldB'].value" } } } ...

vue+element实现前端分页及前端搜索功能

qq_34561243的博客

07-18

1040

前言分页加表格很常见，基本实现：前台分页和后台分页。这里讲一下如何实现前台分页及搜索功能。基于vue和element和es6的知识，demo详见最后。正文页面布局 <template> <div> <el-row> <el-col :span="6"> &l...

elasticsearch两个字段比较大小查询和update

nddjava的专栏

11-25

3806

es日期类型字段条件判断及update POST /index1/_update_by_query { "query": { "bool": { "must": [ { "script": { "script": { "source": "doc['pubdate'].value.getMillis() > doc['time'].value.getMillis()" ...

Vue表单实现历史记录搜索

06-10

要实现Vue表单的历史记录搜索，你可以使用localStorage来存储历史搜索记录，然后在表单中展示这些记录。以下是一个简单的实现示例： 1. 在Vue组件的data中添加一个history数组，用于存储历史搜索记录。 ``` data() { return { history: [] }; } ``` 2. 在表单中添加一个输入框和一个按钮，用于进行搜索。在输入框中添加一个v-model指令，将输入框的值绑定到组件的searchText属性上。按钮的点击事件调用search方法，将搜索内容存储到history数组中。 ``` <template> <div> <input type="text" v-model="searchText" /> <button @click="search">Search</button> </div> </template> <script> export default { data() { return { history: [], searchText: '' }; }, methods: { search() { if (this.searchText) { this.history.push(this.searchText); localStorage.setItem('history', JSON.stringify(this.history)); // perform search } } } }; </script> ``` 3. 在组件的created钩子中，读取localStorage中的历史记录，并将其赋值给history数组。 ``` created() { const history = localStorage.getItem('history'); if (history) { this.history = JSON.parse(history); } } ``` 4. 在表单下方添加一个历史记录列表，展示历史搜索记录。使用v-for指令遍历history数组，将每个搜索记录展示为一个列表项。为了方便用户点击历史记录进行搜索，给每个列表项添加一个@click事件，将点击的记录赋值给searchText属性，并调用search方法进行搜索。 ``` <template> <div> <input type="text" v-model="searchText" /> <button @click="search">Search</button> <ul> <li v-for="record in history" @click="searchText = record; search">{{ record }}</li> </ul> </div> </template> ``` 这样，就可以实现Vue表单的历史记录搜索了。每次进行搜索时，都会将搜索内容存储到localStorage中，下次打开页面时，历史记录会自动加载。