vue 搜索框模糊查询 + 优化(节流) + 关键字高亮

直接上代码

HTML视图层代码

<template>
   <!-- 模糊查询 + 节流 + 高亮 -->
  <div>
    <input
      type="text"
      placehold="请输入id进行查询"
      v-model="inputValue"
      ref="input"
      @keyup="goSearch"
    />
    <!-- 这里v-show比v-if省性能 -->
    <div
      class="conten"
      v-show="isShow"
    >
      <div
        class="contenlist"
        v-for="(item,index) in list"
        :key="index"
      >
        <!-- <span>{{item.id}}</span> -->
        <!-- <span>{{item.name}}</span> -->
        <!-- <span>{{item.time}}</span> -->
        <span v-html="item.id"></span>
        <span v-html="item.name"></span>
        <span v-html="item.time"></span>
      </div>
    </div>
   </div>
</template>

js数据逻辑层代码：

<script>
// import _ from 'lodash'
export default {
  data () {
    return {
      inputValue: "",
      isShow: false,
      statu: true,
      dataList: [
        { id: "9527", name: "刘一", time: "2020-07-10" },
        { id: "9528", name: "陈二", time: "2020-08-10" },
        { id: "9259", name: "张三", time: "2020-09-10" },
        { id: "9277", name: "李四", time: "2020-10-10" },
        { id: "1205", name: "王五", time: "2020-11-10" },
        { id: "1206", name: "赵六", time: "2020-12-10" },
        { id: "1307", name: "孙七", time: "2021-01-10" },
        { id: "1308", name: "周八", time: "2021-02-10" },
        { id: "1309", name: "吴九", time: "2021-03-10" },
        { id: "1300", name: "郑十", time: "2021-04-10" }
      ],
      list: []
    }
  },
  methods: {
    search () {
      this.list = [];
      this.inputValue = this.$refs.input.value;
      // 判断展示列表，如果输入了就展示没输入就不展示
      if (this.inputValue.length > 0) {
        this.isShow = true;
      } else {
        this.isShow = false;
      }

      this.dataList.map((item) => {
        // id、name、time去分别跟输入的值进行比较
        if (item.id.indexOf(this.inputValue) !== -1 || item.name.indexOf(this.inputValue) > -1 || item.time.indexOf(this.inputValue) > -1) {
          // 将当前匹配到的值添加到list数组中
          // this.list.push(item); // 这里需要深拷贝 下面两种方法都可以

          this.list.push(JSON.parse(JSON.stringify(item)));
          // this.list.push(_.cloneDeep(item)); // _.cloneDeep 需要下载lodash
        }
      })

      this.list.map((item) => {
        item.id = this.brightKeyword(item.id)
        item.name = this.brightKeyword(item.name)
        item.time = this.brightKeyword(item.time)
      })
    },
    brightKeyword (val) {
      const keyword = this.inputValue
      if (val.indexOf(keyword) > -1) {
        // replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
        // font标签 规定文本的尺寸、字体和颜色
        return val.replace(keyword, `<font color='tomato'">${keyword}</font>`)
      } else {
        return val
      }
    },
    // 节流函数
    goSearch () {
      // 保持this的指向始终指向vue实例
      const that = this;
      if (!that.statu) {
        return;
      }
      that.statu = false;
      setTimeout(function () {
        console.log(new Date());
        that.search(); // 调用写好的方法
        that.statu = true;
      }, 1000)
    }
  }
}
</script>

css样式代码

<style lang='scss' scoped>
// 这里我用到了sass,用less也可以
.conten {
  margin-top: 10px;
  width: 300px;
  height: 400px;
  border: 1px solid pink;
  overflow-y: auto;
  .contenlist {
    padding: 20px;
    > span {
      padding-right: 10px;
    }
  }
}
</style>

更新一下,用computed 实现模糊查询
老规矩直接上图

<template>
  <div>
    <input
      v-model="inputValue"
      @input="inputFunc"
      type="text"
      placeholder="computed模糊查询"
    >
    <div v-show="isShow">
      <div
        v-for="(item,index) in searchData"
        :key="index"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

逻辑代码

<script>
export default {
  data () {
    return {
      inputValue: "",//输入框中的内容
      isShow: false,//控制搜索的问题显示隐藏
      resData: [
        { name: "大话西游之月光宝盒" },
        { name: "大话西游之仙履奇缘" },
        { name: "功夫" },
        { name: "喜剧之王" },
        { name: "武状元苏乞儿" },
        { name: "食神" },
        { name: "百变星君" },
        { name: "逃学威龙1" },
        { name: "逃学威龙2" },
        { name: "逃学威龙3" },
        { name: "赌圣" }
      ]
    }
  },
  methods: {
    //监听输入事件，当input中有内容时，下面的搜索列表显示出来
    inputFunc () {
      if (this.inputValue.length > 0) {
        this.isShow = true;
      } else {
        this.isShow = false
      }
    }
  },
  //计算属性，当输入内容的时候下面的方法就会根据你输入的内容来过滤resData数组中的数据
  computed: {
    searchData () {
      // 方法一
      const _this = this
      return this.resData.filter(function (item) {
        return Object.keys(item).some(function (key) {
          return String(item[key]).toLowerCase().indexOf(_this.inputValue) > -1
        })
      })
      return this.items;


      // 方法二
      const _this = this
      const fuzzyQueryList = []
      this.resData.forEach(function (item) {
        // map filter some 都可以
        if (item.name.indexOf(_this.inputValue) > -1) {
          fuzzyQueryList.push(item)
        }
      })
      return fuzzyQueryList
    }
  }
}
</script>

若对你有用,道友请点个赞