搜索历史，热门搜索，高亮

搜索历史相关

今天来写一篇关于input框的博客，一个简单的案例，希望能够帮助你们！！！废话不多说，直接见代码·····

<template>
  <div class="home">
    <!-- 顶部 -->
    <div class="home-header-container">
      <div class="home-header-img">
        <img src="../assets/search.png" alt="">
      </div>
      <div class="home-header-input">
        <input type="text" placeholder="音乐/视频/电台/用户" 
        v-model="inpval"
        @change="getinputval"
        @input="onChange"
        >
      </div>
    </div>
    <!-- 搜索内容 -->
    <!-- 匹配内容 -->
    <div class="show-list" v-show="show">
        <div v-for="(item,index) in showlist "
        :key="index"
        v-html="item.replace(inpval,`<font color='red'>${inpval}</font>`)"
        ></div>
    </div>
    <div class="search-container">
        <div class="hot-search-wrapper">
          <h3>热门搜索</h3>
          <div class="hot-search-item">
            <div v-for="(item,index) in hotlist  "
            :key="index"
            class="hot-item"
            @click="onClick(item)"
            >
              {{item.title}}
            </div>
          </div>
        </div>
        <div class="history-search-wrapper">
          <h3>搜索历史</h3>
          <div class="history-search-item">
            <div v-for="(item,index) in hislist  "
            :key="index"
            class="his-item"
            >
              {{item.title}}
            </div>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
import Axios from 'axios'

export default {

  components: {

  },
  data(){
    return{
      hotlist:[],
      hislist:[],
      inpval:"",
      show:false,
      titlelist:[],
      showlist:[]
    }
  },
  methods:{
    onClick(item){
      window.console.log(item)
      // 添加搜索历史
      var index =this.hislist.findIndex((ele)=>{
        return ele.title===item.title
      })
      if(index!=-1){
        this.hislist.splice(index,1)
      }
      this.hislist.unshift(item)
      if(this.hislist.length>4){
        this.hislist.pop()
      }
    },
    // 文本框内容
    getinputval(){
      window.console.log(this.inpval)

      var str={title:this.inpval,hot:false};

      var index =this.hislist.findIndex((ele)=>{
        return ele.title===this.inpval
      })
      if(index!=-1){
        this.hislist.splice(index,1)
      }
      this.hislist.unshift(str)
      window.console.log(this.hislist)
      if(this.hislist.length>4){
        this.hislist.pop()
      }
      this.inpval=''
      this.show=false
    },
    // 匹配关键字
    onChange(){
      let temp=[]
      this.titlelist.forEach((ele)=>{
        if(ele.includes(this.inpval)){
          // window.console.log(this.inpval)
          temp.push(ele)
        }
        this.showlist=temp
        // window.console.log(temp)
      })
    }
  },
  mounted() {
    Axios.get("http://localhost:8080/hotsearch.json").then((resp)=>{
      // window.console.log(resp.data)
      this.hotlist=resp.data
    }).catch((error)=>{
      window.console.log(error)
    })
    Axios.get("http://localhost:8080/history.json").then((resp)=>{
      // window.console.log(resp.data)
      this.titlelist=resp.data
    }).catch((error)=>{
      window.console.log(error)
    })
  },
  watch:{
    inpval:{
      handler(newValue){
        if(newValue.length>0){
          this.show=true
        }else{
          this.show=false
        }
      }
    }
  }
}
</script>

<style>
.home-header-container{
    width: 100%;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background: skyblue; */
}
.home-header-img{
    width: 10%;
    height:64px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background: red; */
}
.home-header-img img{
    width: 80%;
}
.home-header-input{
    width: 90%;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background: green; */
}
.home-header-input input{
    width: 90%;
    height: 40px;
    border: 1px solid #000;
    outline: none;
    border-radius: 40px;
    text-indent: 1rem;
}

.search-container{
    width: 100%;
    /* height: 400px; */
    /* background: skyblue; */
    
}
.hot-search-wrapper{
    width: 100%;
    /* height: 300px; */
    /* background: red; */
    /* border: 1px solid transparent; */
}
.history-search-wrapper{
    width: 100%;
}
h3{
    width: 100%;
    text-indent: 1em;
    padding: 10px 0;
}
.hot-search-item{
    width: 100%;
    /* height: 300px; */
    display: flex;
    /* align-items: center; */
    justify-content: center;
    flex-wrap: wrap;
    /* background: skyblue; */
}
.history-search-item{
    width: 100%;
    /* height: 300px; */
    /* background: skyblue; */
}
.hot-item{
    width: 25%;
    height: 30px;
    /* padding: 10px; */
    /* padding: 10px; */
    /* background: skyblue; */
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 10px;
    border: 1px solid #000;
}

.his-item{
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: start;
    background: #f7f7f7;
    margin: 10px 0;
    text-indent: 1em;
}

.show-list{
    width: 100%;
    height: 600px;
    position: fixed;
    top: 64px;
    background: skyblue;
}
</style>