vue实现简单搜索功能

1、概述

在vue项目中，搜索功能是我们经常需要使用的一个场景，最常用的是在列表数据中搜索一个想要的，今天的例子就是我们实现vue从列表数据中搜索，并展示。如下图所示：

2、功能逻辑

2.1功能流程

这里我们进行简单搜索功能，搜索逻辑是只要用户输入值与产品的名称进行模糊匹配，符合条件的数据进行展示，不符合条件的数据过滤。流程描述如下：

用户点击搜索框，输入内容；
检测到搜索框值变化，取用户输入值；
对用户输入值进行判断，若为空，则展示原列表，不为空则进行筛选；
将用户输入值与所有列表数据进行遍历匹配，若匹配，则展示匹配条目，完成搜索。

2.2 流程图

这张图仅代表最简单的搜索流程，若需要进行一些复杂的处理，可以进行修改，比如说匹配的商品名称关键字变色等。

3、功能实现

3.1 vue组件化

实现如上图功能，我们肯定是使用vue的组件特性，将搜索以及，产品列表抽成组件，以提高代码复用性，抽成组件之后，该页面将由三个部分组成，数据在以下三个组件之间传递：

父组件：主页面，用于数据逻辑处理；
搜索组件：给父组件传递用户输入值；
列表：展示从父组件接收的值。

3.2 代码

父组件：index.vue

<template><div><title-bar :title="title" @goBack="goback"></title-bar><search-input :plhText="searchPlhText"@input-changed="searchInputChange"></search-input><div v-for="(prd,index) in productListRst" :key="index"><prd-item :prd="prd" @toPrdDetail="toPrdDetail"></prd-item></div> </div>
</template>
<script>
import TitleBar from "@/components/TitleBar";
import SearchInput from "./components/SearchInput";
import PrdItem from './components/PrdItem';
export default {name: "",components: {TitleBar,SearchInput,PrdItem},data() {return {title: "产品列表",searchPlhText: "请输入产品名称",productList: {}, // 产品列表productListRst: {}, // 搜索筛选之后的产品列表}},created() {// 初始化页面参数，按照生命周期，子组件需要的参数父组件需要在created生命周期取值this.initParams();},methods: {// 返回方法goback() {// this.$emit("GoBack");},// 初始化页面参数,获取产品列表initParams() {this.productList = [{imgPath: 'apple-1001.png',name: 'Apple iPad Air 平板电脑(2020新款)',price: '4799.00',sale: '5',ranking: '10000+评价 平板热卖第5名',prdShopName: 'Apple官方旗舰店'},{imgPath: 'apple-1002.png',name: 'Apple iPhone 11手机',price: '4999.00',sale: '5',ranking: '375万+评价',prdShopName: 'Apple官方旗舰店'},{imgPath: 'apple-1003.jpg',name: 'Apple AirPods 配充电盒 Apple蓝牙耳机',price: '1246.00',sale: '5',ranking: '200万+评价',prdShopName: 'Apple官方旗舰店'},];this.productListRst = this.productList;},// 每次search框变化则进行筛选,对数据进行逻辑处理searchInputChange(value) {// 若未输入值，则展示所有数据if(null === value || undefined === value){this.productListRst = this.productList;} else {this.productListRst = []; // 结果列表置空let regStr =  '';// 初始化正则表达式for(let i=0; i<value.length; i++){regStr = regStr + '(' + value[i] + ')([\\s]*)'; //跨字匹配}let reg = new RegExp(regStr);console.log(reg);for(let i=0; i<this.productList.length; i++){let name = this.productList[i].name; //按照名字匹配let regMatch = name.match(reg);if(null !== regMatch) {// 将匹配的数据放入结果列表中this.productListRst.push(this.productList[i]);}}}},// 去往产品详情页toPrdDetail(){this.$router.push({path: 'detail'})}}
};
</script>
<style scoped>
#page-title {width: 100%;background-color: #fff;display: flex;justify-content: center;
}
.backImg {width: 20px;
}
</style>

主要的逻辑处理是 searchInputChange，对于更复杂的搜索逻辑，也可以在里面进行处理。
搜索组件：searchInput.vue

<template><div class="search-box"><div class="search-input"><img src="@/assets/images/search.png" /><inputtype="text":placeholder="plhText"maxlength="10"@change="inputChange"v-model="inputValue"/></div></div>
</template>
<script>
export default {name: "searchInput", // 搜索输入框props: {// input框占位文字plhText: {type: String,default: "请输入搜索内容"}},data() {return {inputValue: "" //输入框的值};},methods: {// 每次输入框变化刷新列表inputChange() {// 使用emit给父组件传值this.$emit('input-changed', this.inputValue);}}
};
</script>

列表组件：productList.vue

<template><div class="prd-item" @click="toPrdDetail"><img :src="require('@/assets/images/'+prd.imgPath)"><div class="prd-discription"><div class="prd-title">{{ prd.name }}</div><div class="prd-sellInfo"><div class="prd-price">{{ prd.price }}</div><div class="prd-saleLable" v-if="prd.sale.lenght!==0"><label>12期免息</label><span>新品</span></div><div class="prd-ranking">{{ prd.ranking }}</div><div class="prd-shop">{{ prd.prdShopName }}</div></div></div></div>
</template>
<script>
export default {props: {// 传入产品对象，必传属性为imgPath,name,price,shopprd: {type: Object,}},methods: {// 跳转产品详情页面toPrdDetail() {this.$emit("to-prd-detail",this.prd.Id);}}
};
</script>

标题头组件：titleBar

<template><div class="page-title"><div class="backImg" @click="goBack"><img src="@/assets/images/arrow_left.png" /></div><div class="titleText"><label>{{ title }}</label></div><div v-if="showRightArea" class="rightImg"><img :src="rightImgPath" /></div></div>
</template>
<script>
export default {name: "titleBar",props: {// 标题title: {type: String, //规定数据类型default: "标题" //默认值},showRightArea: {type: Boolean,default: false},rightImgPath: {type: String}},methods: {// 返回方法goBack() {this.$emit("go-back");}}
};
</script>
<style lang="scss" scoped>
.page-title {width: 100%;background-color: #fff;display: flex;padding: 10px 0;justify-content: flex-start;
}
.backImg {width: 15%;text-align: center;img {margin: 0 auto;width: 24px;}
}
.titleText {font-size: 18px;height: 26px;width: 70%;text-align: center;label {margin: 0 auto;}
}
.rightImg {width: 15%;text-align: center;img {margin: 0 auto;width: 24px;}
}
</style>

以上代码为部分代码，css代码不包含在内。

3.3 动态效果

以上代码实现的效果如下动态图：

vue实现简单搜索功能相关推荐

python discuz搜索api_Django用内置方法实现简单搜索功能的方法
Model中分别提供了filter方法和icontains方法实现简单的搜索功能. html页面中实现搜索框模板api_test_manage.html中增加以下内容 {% csrf_token % ...
Flask实现简单搜索功能
Flask实现简单搜索功能主要功能是通过form的方式传值,再到数据库中查询.下面是数据库的内容我们这里主要是实现对content进行模糊匹配. 首先打开pycharm,构建一个最简单的flask应 ...
vue实现自定义搜索功能
vue实现自定义搜索功能需要使用computed函数,具体代码实现如下: <template><div v-theme:column="'narrow'" id= ...
vue 使用 el-table 添加搜索框实现简单搜索功能，同时判断输入是否为空
前言: vue 项目使用 el-table ,想给表格上方添加搜索功能 ,虽然 element 官方文档自带类似的搜索框我这里没有使用官方文档的方法 ,我是通过使用两个操作数组的方法来实现搜 ...
vue实现前端搜索功能
当数据量不是很大时,可以在前端进行搜索.这里实现基本的搜索功能,可以根据实际情形,再增添功能,将其变复杂. 将下面的代码贴过去,就可以直接体验简单的搜索功能.没有写样式,仅供大家了解实现的逻辑. 界面 ...
Java Web简单搜索功能实现
小demo,没有使用框架. webapp项目,用到了servlet + jsp,使用jdbc从MySQL中查询数据构建工具maven 先上截图 pom.xml 注意版本问题! <propert ...
高德地图引入Vue添加POI搜索功能、marker点标记、通过经纬度逆编码过程
安装高德地图 npm i @amap/amap-jsapi-loader --save 引入 import AMapLoader from '@amap/amap-jsapi-loader'; *在组 ...
当前页面实现简单搜索功能
功能描述:在搜索框中输入内容,在渲染出的网络数据中取出带输入关键字的内容,单独显示功能实现: 1.index.wxml:循环一个数组 <view class='preson'><i ...
使用vue实现自定义搜索功能
实现效果如:http://www.ligerui.com/demos/filter/filter.htm 代码: <%@ Page Language="C#" AutoEve ...