Vue實現(xiàn)簡單搜索功能的示例代碼

更新時間：2023年03月16日 16:16:07 作者：Saga?Two

在vue項目中，搜索功能是我們經(jīng)常需要使用的一個場景，最常用的是在列表數(shù)據(jù)中搜索一個想要的，今天的例子就是我們實現(xiàn)vue從列表數(shù)據(jù)中搜索，希望對大家有所幫助

1、概述

在vue項目中，搜索功能是我們經(jīng)常需要使用的一個場景，最常用的是在列表數(shù)據(jù)中搜索一個想要的，今天的例子就是我們實現(xiàn)vue從列表數(shù)據(jù)中搜索，并展示。如下圖所示：

2、功能邏輯

2.1功能流程

這里我們進(jìn)行簡單搜索功能，搜索邏輯是只要用戶輸入值與產(chǎn)品的名稱進(jìn)行模糊匹配，符合條件的數(shù)據(jù)進(jìn)行展示，不符合條件的數(shù)據(jù)過濾。流程描述如下：

用戶點擊搜索框，輸入內(nèi)容；
檢測到搜索框值變化，取用戶輸入值；
對用戶輸入值進(jìn)行判斷，若為空，則展示原列表，不為空則進(jìn)行篩選；
將用戶輸入值與所有列表數(shù)據(jù)進(jìn)行遍歷匹配，若匹配，則展示匹配條目，完成搜索。

2.2 流程圖

這張圖僅代表最簡單的搜索流程，若需要進(jìn)行一些復(fù)雜的處理，可以進(jìn)行修改，比如說匹配的商品名稱關(guān)鍵字變色等。

3、功能實現(xiàn)

3.1 vue組件化

實現(xiàn)如上圖功能，我們肯定是使用vue的組件特性，將搜索以及，產(chǎn)品列表抽成組件，以提高代碼復(fù)用性，抽成組件之后，該頁面將由三個部分組成，數(shù)據(jù)在以下三個組件之間傳遞：

父組件：主頁面，用于數(shù)據(jù)邏輯處理；
搜索組件：給父組件傳遞用戶輸入值；
列表：展示從父組件接收的值。

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: "產(chǎn)品列表",
      searchPlhText: "請輸入產(chǎn)品名稱",
      productList: {}, // 產(chǎn)品列表
      productListRst: {}, // 搜索篩選之后的產(chǎn)品列表
    }
  },
  created() {
    // 初始化頁面參數(shù)，按照生命周期，子組件需要的參數(shù)父組件需要在created生命周期取值
    this.initParams();
  },
  methods: {
    // 返回方法
    goback() {
      // this.$emit("GoBack");
    },
    // 初始化頁面參數(shù),獲取產(chǎn)品列表
    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手機(jī)',
          price: '4999.00',
          sale: '5',
          ranking: '375萬+評價',
          prdShopName: 'Apple官方旗艦店'
        },
        {
          imgPath: 'apple-1003.jpg',
          name: 'Apple AirPods 配充電盒 Apple藍(lán)牙耳機(jī)',
          price: '1246.00',
          sale: '5',
          ranking: '200萬+評價',
          prdShopName: 'Apple官方旗艦店'
        },
      ];
      this.productListRst = this.productList;
    },
    // 每次search框變化則進(jìn)行篩選,對數(shù)據(jù)進(jìn)行邏輯處理
    searchInputChange(value) {
      // 若未輸入值，則展示所有數(shù)據(jù)
      if(null === value || undefined === value){
        this.productListRst = this.productList;
      } else {
        this.productListRst = []; // 結(jié)果列表置空
        let regStr =  '';
        // 初始化正則表達(dá)式
        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) {// 將匹配的數(shù)據(jù)放入結(jié)果列表中
             this.productListRst.push(this.productList[i]);
          }
        }
      }
    },
    // 去往產(chǎn)品詳情頁
    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，對于更復(fù)雜的搜索邏輯，也可以在里面進(jìn)行處理。

搜索組件：searchInput.vue

<template>
  <div class="search-box">
    <div class="search-input">
      <img src="@/assets/images/search.png" />
      <input
        type="text"
        :placeholder="plhText"
        maxlength="10"
        @change="inputChange"
        v-model="inputValue"
      />
    </div>
  </div>
</template>
<script>
export default {
  name: "searchInput", // 搜索輸入框
  props: {
    // input框占位文字
    plhText: {
      type: String,
      default: "請輸入搜索內(nèi)容"
    }
  },
  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: {
    // 傳入產(chǎn)品對象，必傳屬性為imgPath,name,price,shop
    prd: {
      type: Object,
    }
  },
  methods: {
    // 跳轉(zhuǎn)產(chǎn)品詳情頁面
    toPrdDetail() {
      this.$emit("to-prd-detail",this.prd.Id);
    }
  }
};
</script>

標(biāo)題頭組件：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: {
    // 標(biāo)題
    title: {
      type: String, //規(guī)定數(shù)據(jù)類型
      default: "標(biāo)題" //默認(rèn)值
    },
    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代碼不包含在內(nèi)。