OpenIsle/open-isle-cli/src/components/SearchDropdown.vue

<template>
  <Dropdown
    v-model="selected"
    :fetch-options="fetchResults"
    remote
    menu-class="search-menu"
    option-class="search-option"
  >
    <template #display="{ toggle, search }">
      <div class="search-input" @click="toggle">
        <i class="search-input-icon fas fa-search"></i>
        <input type="text" v-model="keyword" placeholder="Search" @focus="toggle" @input="search.value = keyword" />
      </div>
    </template>
    <template #option="{ option }">
      <i :class="['result-icon', iconMap[option.type] || 'fas fa-question']"></i>
      <span v-html="highlight(option.text)"></span>
    </template>
  </Dropdown>
</template>

<script>
import { ref } from 'vue'
import Dropdown from './Dropdown.vue'
import { API_BASE_URL } from '../main'

export default {
  name: 'SearchDropdown',
  components: { Dropdown },
  setup() {
    const keyword = ref('')
    const selected = ref(null)

    const fetchResults = async (kw) => {
      if (!kw) return []
      const res = await fetch(`${API_BASE_URL}/api/search/global?keyword=${encodeURIComponent(kw)}`)
      if (!res.ok) return []
      const data = await res.json()
      return data.map(r => ({ id: r.id, text: r.text, type: r.type }))
    }

    const highlight = (text) => {
      if (!keyword.value) return text
      const reg = new RegExp(keyword.value, 'gi')
      return text.replace(reg, m => `<span class="highlight">${m}</span>`)
    }

    const iconMap = {
      user: 'fas fa-user',
      post: 'fas fa-file-alt',
      comment: 'fas fa-comment'
    }

    return { keyword, selected, fetchResults, highlight, iconMap }
  }
}
</script>

<style scoped>
.search-input {
  display: flex;
  align-items: center;
  border: 1px solid lightgray;
  border-radius: 10px;
  padding: 10px;
  width: 100%;
  max-width: 600px;
}
.search-input input {
  border: none;
  outline: none;
  width: 100%;
  margin-left: 10px;
  font-size: 16px;
}
.search-menu {
  width: 100%;
  max-width: 600px;
}
.search-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
}
.highlight {
  color: var(--primary-color);
}
.result-icon {
  opacity: 0.6;
}
</style>