经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
Vue实现简单搜索功能的示例代码
来源:jb51  时间:2023/3/17 8:57:23  对本文有异议

1、概述

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

2、功能逻辑

2.1功能流程

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

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

2.2 流程图

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

3、功能实现

3.1 vue组件化

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

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

3.2 代码

父组件:index.vue

  1. <template>
  2. <div>
  3. <title-bar :title="title" @goBack="goback"></title-bar>
  4. <search-input
  5. :plhText="searchPlhText"
  6. @input-changed="searchInputChange"
  7. ></search-input>
  8. <div v-for="(prd,index) in productListRst" :key="index">
  9. <prd-item :prd="prd" @toPrdDetail="toPrdDetail"></prd-item>
  10. </div>
  11. </div>
  12. </template>
  13. <script>
  14. import TitleBar from "@/components/TitleBar";
  15. import SearchInput from "./components/SearchInput";
  16. import PrdItem from './components/PrdItem';
  17. export default {
  18. name: "",
  19. components: {
  20. TitleBar,
  21. SearchInput,
  22. PrdItem
  23. },
  24. data() {
  25. return {
  26. title: "产品列表",
  27. searchPlhText: "请输入产品名称",
  28. productList: {}, // 产品列表
  29. productListRst: {}, // 搜索筛选之后的产品列表
  30. }
  31. },
  32. created() {
  33. // 初始化页面参数,按照生命周期,子组件需要的参数父组件需要在created生命周期取值
  34. this.initParams();
  35. },
  36. methods: {
  37. // 返回方法
  38. goback() {
  39. // this.$emit("GoBack");
  40. },
  41. // 初始化页面参数,获取产品列表
  42. initParams() {
  43. this.productList = [
  44. {
  45. imgPath: 'apple-1001.png',
  46. name: 'Apple iPad Air 平板电脑(2020新款)',
  47. price: '4799.00',
  48. sale: '5',
  49. ranking: '10000+评价 平板热卖第5名',
  50. prdShopName: 'Apple官方旗舰店'
  51. },
  52. {
  53. imgPath: 'apple-1002.png',
  54. name: 'Apple iPhone 11手机',
  55. price: '4999.00',
  56. sale: '5',
  57. ranking: '375万+评价',
  58. prdShopName: 'Apple官方旗舰店'
  59. },
  60. {
  61. imgPath: 'apple-1003.jpg',
  62. name: 'Apple AirPods 配充电盒 Apple蓝牙耳机',
  63. price: '1246.00',
  64. sale: '5',
  65. ranking: '200万+评价',
  66. prdShopName: 'Apple官方旗舰店'
  67. },
  68. ];
  69. this.productListRst = this.productList;
  70. },
  71. // 每次search框变化则进行筛选,对数据进行逻辑处理
  72. searchInputChange(value) {
  73. // 若未输入值,则展示所有数据
  74. if(null === value || undefined === value){
  75. this.productListRst = this.productList;
  76. } else {
  77. this.productListRst = []; // 结果列表置空
  78. let regStr = '';
  79. // 初始化正则表达式
  80. for(let i=0; i<value.length; i++){
  81. regStr = regStr + '(' + value[i] + ')([\\s]*)'; //跨字匹配
  82. }
  83. let reg = new RegExp(regStr);
  84. console.log(reg);
  85. for(let i=0; i<this.productList.length; i++){
  86. let name = this.productList[i].name; //按照名字匹配
  87. let regMatch = name.match(reg);
  88. if(null !== regMatch) {// 将匹配的数据放入结果列表中
  89. this.productListRst.push(this.productList[i]);
  90. }
  91. }
  92. }
  93. },
  94. // 去往产品详情页
  95. toPrdDetail(){
  96. this.$router.push({path: 'detail'})
  97. }
  98. }
  99. };
  100. </script>
  101. <style scoped>
  102. #page-title {
  103. width: 100%;
  104. background-color: #fff;
  105. display: flex;
  106. justify-content: center;
  107. }
  108. .backImg {
  109. width: 20px;
  110. }
  111. </style>

主要的逻辑处理是 searchInputChange,对于更复杂的搜索逻辑,也可以在里面进行处理。

搜索组件:searchInput.vue

  1. <template>
  2. <div class="search-box">
  3. <div class="search-input">
  4. <img src="@/assets/images/search.png" />
  5. <input
  6. type="text"
  7. :placeholder="plhText"
  8. maxlength="10"
  9. @change="inputChange"
  10. v-model="inputValue"
  11. />
  12. </div>
  13. </div>
  14. </template>
  15. <script>
  16. export default {
  17. name: "searchInput", // 搜索输入框
  18. props: {
  19. // input框占位文字
  20. plhText: {
  21. type: String,
  22. default: "请输入搜索内容"
  23. }
  24. },
  25. data() {
  26. return {
  27. inputValue: "" //输入框的值
  28. };
  29. },
  30. methods: {
  31. // 每次输入框变化刷新列表
  32. inputChange() {
  33. // 使用emit给父组件传值
  34. this.$emit('input-changed', this.inputValue);
  35. }
  36. }
  37. };
  38. </script>

列表组件:productList.vue

  1. <template>
  2. <div class="prd-item" @click="toPrdDetail">
  3. <img :src="require('@/assets/images/'+prd.imgPath)">
  4. <div class="prd-discription">
  5. <div class="prd-title">{{ prd.name }}</div>
  6. <div class="prd-sellInfo">
  7. <div class="prd-price">{{ prd.price }}</div>
  8. <div class="prd-saleLable" v-if="prd.sale.lenght!==0">
  9. <label>12期免息</label>
  10. <span>新品</span>
  11. </div>
  12. <div class="prd-ranking">{{ prd.ranking }}</div>
  13. <div class="prd-shop">{{ prd.prdShopName }}</div>
  14. </div>
  15. </div>
  16. </div>
  17. </template>
  18. <script>
  19. export default {
  20. props: {
  21. // 传入产品对象,必传属性为imgPath,name,price,shop
  22. prd: {
  23. type: Object,
  24. }
  25. },
  26. methods: {
  27. // 跳转产品详情页面
  28. toPrdDetail() {
  29. this.$emit("to-prd-detail",this.prd.Id);
  30. }
  31. }
  32. };
  33. </script>

标题头组件:titleBar

  1. <template>
  2. <div class="page-title">
  3. <div class="backImg" @click="goBack">
  4. <img src="@/assets/images/arrow_left.png" />
  5. </div>
  6. <div class="titleText">
  7. <label>{{ title }}</label>
  8. </div>
  9. <div v-if="showRightArea" class="rightImg">
  10. <img :src="rightImgPath" />
  11. </div>
  12. </div>
  13. </template>
  14. <script>
  15. export default {
  16. name: "titleBar",
  17. props: {
  18. // 标题
  19. title: {
  20. type: String, //规定数据类型
  21. default: "标题" //默认值
  22. },
  23. showRightArea: {
  24. type: Boolean,
  25. default: false
  26. },
  27. rightImgPath: {
  28. type: String
  29. }
  30. },
  31. methods: {
  32. // 返回方法
  33. goBack() {
  34. this.$emit("go-back");
  35. }
  36. }
  37. };
  38. </script>
  39. <style lang="scss" scoped>
  40. .page-title {
  41. width: 100%;
  42. background-color: #fff;
  43. display: flex;
  44. padding: 10px 0;
  45. justify-content: flex-start;
  46. }
  47. .backImg {
  48. width: 15%;
  49. text-align: center;
  50. img {
  51. margin: 0 auto;
  52. width: 24px;
  53. }
  54. }
  55. .titleText {
  56. font-size: 18px;
  57. height: 26px;
  58. width: 70%;
  59. text-align: center;
  60. label {
  61. margin: 0 auto;
  62. }
  63. }
  64. .rightImg {
  65. width: 15%;
  66. text-align: center;
  67. img {
  68. margin: 0 auto;
  69. width: 24px;
  70. }
  71. }
  72. </style>

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

3.3 动态效果

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

到此这篇关于Vue实现简单搜索功能的示例代码的文章就介绍到这了,更多相关Vue搜索功能内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号