美文网首页
Vue里面搜索关键字高亮显示小记

Vue里面搜索关键字高亮显示小记

作者: 周星星的学习笔记 | 来源:发表于2021-02-15 22:28 被阅读0次

    一、效果图

    效果图

    二、HTML搜索结果展示框

        <!-- 顶部搜索筛选区域 -->
        <div class="search-wrap">
          <a-input-search
            v-model="searchKey"
            placeholder="请输入栏目名称"
            enter-button="搜索"
            @search="onSearch"
            class="search-input"
            @keyup="onSearch"
          />
          <div class="search-content" :class="{ 'd-block': isShowSearchContent }">
            <div
              class="search-content-item"
              v-for="(items, index) in searchResult"
              :key="index"
            >
              <template v-for="(val, inx) in items">
                <span :key="'name' + inx" v-html="val.name">{{ val.name }} </span>
                <a-icon
                  :key="'sep' + inx"
                  type="right"
                  v-if="items.length > 1 && inx != items.length - 1"
                  class="search-content-item-sep"
                />
              </template>
            </div>
          </div>
        </div>
        <!-- 顶部搜索筛选区域 -->
    

    三、定义相关数据属性

      data() {
        return {      
          //搜索结果列表
          searchResult: [],
          //保存用户输入的搜索关键字
          searchKey: "",
          //是否显示搜索结果内容框
          isShowSearchContent: false,
        };
      },
    

    四、触发搜索的逻辑

        //根据关键字搜索栏目
        onSearch() {
          if (this.searchKey) {
            //请求接口获取到搜索结果列表数据
            //this.searchResult
            
            //使用正则处理关键字高亮显示
            let reg = new RegExp(this.searchKey, "g");
            let resultList = this.searchResult.map((value) => {
              let list = [];
              value.forEach((item) => {
                let hText = item.name.replace(reg, (match) => {
                  return `<font style="color:#1890ff">${match}</font>`;
                });
                list.push({
                  id: item.id,
                  name: hText,
                });
              });
              return list;
            });
            this.searchResult = resultList;
            this.isShowSearchContent = true;
          } else {
            this.isShowSearchContent = false;
          }
        },
    

    相关文章

      网友评论

          本文标题:Vue里面搜索关键字高亮显示小记

          本文链接:https://www.haomeiwen.com/subject/ekjmxltx.html