element-plus/website/components/search.vue

<template>
  <el-autocomplete
    v-model="query"
    size="small"
    :popper-class="`algolia-search${isEmpty ? ' is-empty' : ''}`"
    :fetch-suggestions="querySearch"
    :placeholder="placeholder"
    :trigger-on-focus="false"
    highlight-first-item
    @select="handleSelect"
  >
    <template #default="props">
      <p v-if="props && props.item.title" class="algolia-search-title">
        <span v-html="props.item.highlightedCompo"></span>
        <span class="algolia-search-separator"></span>
        <span v-html="props.item.title"></span>
      </p>
      <p
        v-if="props && props.item.content"
        class="algolia-search-content"
        v-html="props.item.content"
      ></p>
      <a
        v-if="props && props.item.img"
        class="algolia-search-link"
        target="_blank"
        href="https://www.algolia.com/docsearch"
      >
        <img
          class="algolia-search-logo"
          src="../assets/images/search-by-algolia.svg"
          alt="algolia-logo"
        />
      </a>
      <p v-if="props && props.item.isEmpty" class="algolia-search-empty">
        {{ emptyText }}
      </p>
    </template>
  </el-autocomplete>
</template>

<script>
import algoliasearch from 'algoliasearch'
import { Language } from '../enums/language'

export default {
  data() {
    return {
      index: null,
      query: '',
      isEmpty: false,
      langs: {
        [Language.CN]: {
          search: '搜索文档',
          empty: '无匹配结果',
          index: 'zh',
        },
        [Language.EN]: {
          search: 'Search',
          empty: 'No results',
          index: 'en',
        },
        [Language.ES]: {
          search: 'Buscar',
          empty: 'No hay datos que coincidan',
          index: 'es',
        },
        [Language.FR]: {
          search: 'Rechercher',
          empty: 'Aucun résultat',
          index: 'fr',
        },
        [Language.JP]: {
          search: '検索',
          empty: '検索結果なし',
          index: 'jp',
        },
      },
    }
  },

  computed: {
    lang() {
      return this.$route.meta.lang
    },

    placeholder() {
      return this.lang ? this.langs[this.lang].search : ''
    },

    emptyText() {
      return this.lang ? this.langs[this.lang].empty : ''
    },
  },

  watch: {
    lang() {
      this.initIndex()
    },
  },

  mounted() {
    this.initIndex()
  },

  methods: {
    initIndex() {
      const client = algoliasearch(
        '7DCTSU0WBW',
        '463385cf36ad2e81aff21afea1c0409c'
      )
      this.index = client.initIndex(
        `element-${this.lang ? this.langs[this.lang].index : 'zh'}`
      )
    },

    querySearch(query, cb) {
      if (!query) return
      this.index
        .search(query, { hitsPerPage: 6 })
        .then((res) => {
          if (res.hits.length > 0) {
            this.isEmpty = false
            cb(
              res.hits
                .map((hit) => {
                  let content = hit._highlightResult.content.value.replace(
                    /\s+/g,
                    ' '
                  )
                  const highlightStart = content.indexOf(
                    '<span class="algolia-highlight">'
                  )
                  if (highlightStart > -1) {
                    const startEllipsis = highlightStart - 15 > 0
                    content =
                      (startEllipsis ? '...' : '') +
                      content.slice(
                        Math.max(0, highlightStart - 15),
                        content.length
                      )
                  } else if (content.indexOf('|') > -1) {
                    content = ''
                  }
                  return {
                    anchor: hit.anchor,
                    component: hit.component,
                    highlightedCompo: hit._highlightResult.component.value,
                    title: hit._highlightResult.title.value,
                    content,
                  }
                })
                .concat({ img: true })
            )
          } else {
            this.isEmpty = true
            cb([{ isEmpty: true }])
          }
        })
        .catch((err) => {
          console.error(err)
          return
        })
    },

    handleSelect(val) {
      if (val.img || val.isEmpty) return
      const component = val.component || ''
      const anchor = val.anchor
      this.$router.push(
        `/${this.lang}/component/${component}${anchor ? `#${anchor}` : ''}`
      )
    },
  },
}
</script>
<style lang="scss">
.algolia-search {
  width: 450px !important;

  .el-autocomplete-suggestion {
    width: 450px !important;
  }

  &.is-empty {
    .el-autocomplete-suggestion__list {
      padding-bottom: 0;
    }
  }

  .el-autocomplete-suggestion__list {
    position: static !important;
    padding-bottom: 28px;
  }

  li {
    border-bottom: solid 1px var(--el-border-color-base);

    &:last-child {
      border-bottom: none;
    }
  }

  .algolia-highlight {
    color: #409eff;
    font-weight: bold;
  }

  .algolia-search-title {
    font-size: 14px;
    margin: 6px 0;
    line-height: 1.8;
  }

  .algolia-search-separator {
    padding: 0 6px;
  }

  .algolia-search-content {
    font-size: 12px;
    margin: 6px 0;
    line-height: 2.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .algolia-search-link {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-right: 20px;
    background-color: #e4e7ed;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    box-sizing: border-box;
    text-align: right;

    &:hover {
      background-color: #e4e7ed;
    }

    img {
      display: inline-block;
      height: 17px;
      margin-top: 10px;
    }
  }

  .algolia-search-empty {
    margin: 5px 0;
    text-align: center;
    color: var(--el-text-color-secondary);
  }
}
</style>