Input输入框和Select选择器相结合完美搜索模式

前端

2023-09-30 09:32:12

既可模糊搜索又可进行匹配具体选择项进行精确搜索的需求场景

在实际开发中，既可模糊搜索又可进行匹配具体选择项进行精确搜索的需求场景非常常见。例如：

电商网站上的搜索框： 用户既可以输入关键词进行模糊搜索，也可以选择具体的商品分类进行精确搜索。
知识库网站上的搜索框： 用户既可以输入关键词进行模糊搜索，也可以选择具体的知识分类进行精确搜索。
论坛网站上的搜索框： 用户既可以输入关键词进行模糊搜索，也可以选择具体的版块进行精确搜索。

如何使用input输入框和select选择器实现既可模糊搜索又可进行匹配具体选择项进行精确搜索的功能

要实现既可模糊搜索又可进行匹配具体选择项进行精确搜索的功能，可以按照以下步骤操作：

在页面上添加一个input输入框和一个select选择器。
将select选择器中的选项与要搜索的数据集相关联。
在input输入框中添加一个事件监听器，并在用户输入时触发该监听器。
在事件监听器中，根据用户输入的内容进行模糊搜索或精确搜索。
将搜索结果显示在页面上。

基于element组件库的具体实现示例

下面是一个基于element组件库的具体实现示例：

<template>
  <div>
    <el-input v-model="keyword" placeholder="请输入关键词" @input="handleInput"></el-input>
    <el-select v-model="selectedOption" placeholder="请选择" @change="handleSelect">
      <el-option
        v-for="option in options"
        :key="option.value"
        :label="option.label"
        :value="option.value"
      />
    </el-select>
    <ul>
      <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const keyword = ref('')
    const selectedOption = ref('')
    const options = ref([
      { value: '1', label: '选项1' },
      { value: '2', label: '选项2' },
      { value: '3', label: '选项3' },
    ])
    const items = ref([
      { id: 1, name: '项目1' },
      { id: 2, name: '项目2' },
      { id: 3, name: '项目3' },
    ])

    const handleInput = () => {
      if (keyword.value === '') {
        filteredItems.value = items.value
      } else {
        filteredItems.value = items.value.filter(item => item.name.includes(keyword.value))
      }
    }

    const handleSelect = () => {
      if (selectedOption.value === '') {
        filteredItems.value = items.value
      } else {
        filteredItems.value = items.value.filter(item => item.id === selectedOption.value)
      }
    }

    const filteredItems = computed(() => {
      if (keyword.value === '' && selectedOption.value === '') {
        return items.value
      } else if (keyword.value === '') {
        return items.value.filter(item => item.id === selectedOption.value)
      } else if (selectedOption.value === '') {
        return items.value.filter(item => item.name.includes(keyword.value))
      } else {
        return items.value.filter(item => item.name.includes(keyword.value) && item.id === selectedOption.value)
      }
    })

    return {
      keyword,
      selectedOption,
      options,
      items,
      handleInput,
      handleSelect,
      filteredItems,
    }
  },
}
</script>