模糊搜索（类百度）

项目积累，话不多说上代码

一、input + 图片button

效果：输入关键字，显示搜索的内容；显示内容关键字高亮加粗；按回车或点击按钮或点击联想的某一条跳转

<template>
<div>
	<input 
	   v-model="companyName"
	   @input="inputFunc"
	   type="text"
	   @keyup.13="searchBtn()"
	   placeholder="请输入企业名称"
	 />
	 <div class="searchBtn" @click="searchBtn()">
	   <img src="@/assets/img/13.png" alt />
	 </div>
	  <!-- 搜索后的 -->
     <div class="hind" v-show="hindBox">
       <ul>
         <li
           v-for="(item, index) in searchData"
           :key="index"
           @click="hindLi(item)"
           v-html="brightenKeyword(item.companyName)"
         ></li>
       </ul>
     </div>
</div>
</template>
<script>
import api from "@/../static/common/api/api.js";
export default { 
  data() {
    return {
      companyName: "",  
      list: [], //原本数据 
      hindBox: false, 
    };
  },
  computed: {
    searchData() {
      let companyName = this.companyName; 
      if (companyName) {
        return this.list.filter(product => { 
          return Object.keys(product).some(function(key) { 
            return (
              String(product[key])
                // toLowerCase() 方法用于把字符串转换为小写。
                // .toLowerCase()
                // indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
                .indexOf(companyName) > -1
            );
          });
        });
      } 
    }
  },
  methods: { 
    // 关键字高亮
    brightenKeyword(val) {
      if (val.indexOf(this.companyName) !== -1 && this.companyName !== "") {
        return val.replace(this.companyName, "<font color='red'><B>" + this.companyName + "</B></font>");
      } else {
        return val;
      }
    },
    // 点击搜索列表传值跳转
    hindLi(val) {},
    // 搜索内容框是否显示
    inputFunc() {
      if (this.companyName.length > 0) {
        this.hindBox = true;
      } else {
        this.hindBox = false;
      }
    },
    // 获取数据
    getFiveCompany() {
      api.indexSearch(this.companyName).then(res => {
        this.list = res.data; 
      });
    },
    // 回车或按钮跳搜索
      searchBtn() {
      this.$router.push({
        path: "/search",
        query: {
          companyName: this.companyName
        }
      });
    }, 
  }, 
  watch: {//监听每次输入的值请求数据
    companyName: function() {
      this.getFiveCompany();
    }
  }
};
</script>

二、el-input + el-button

效果：输入关键字，按回车或点击按钮传参

  <el-input
      placeholder="请输入内容"
 	  v-model="conName"
      @keyup.enter.native="searchEnterFun"
    >
      <el-button slot="append" @click="searchHand">
      	//可通过 slot 来指定在 input 中前置或者后置内容。
        <img src="@/assets/img/搜索.png" alt />
      </el-button>
    </el-input>

<script> 
export default { 
  data() {
    return {
      conName: "", 
      }
   },
   methods:{
      // 回车搜索
    searchEnterFun: function(e) {
      var keyCode = window.event ? e.keyCode : e.which;
      // console.log('回车搜索',keyCode,e);
      if (keyCode == 13 && this.conName) { 
       。。。
      }
    },
    // 搜索
    searchHand() {
      // console.log('传参') 
      。。。
    },
   }

};
</script>