input输入框和select选择器“结合”使用

一. 前言。

在面对表格列表对应的搜索需求时，通常只要求input文本框模糊搜索或者select选择器选中具体项进行精确搜索即可。可是本文当然不会讲述这么简单的知识点，而是带你认识input输入框和select选择器两者间“相结合”起来使用时的技巧。毕竟可能有一天，你的PM小姐姐会让你实现既可以让用户模糊输入也可以让用户精确匹配选项进行搜索的功能。

二. 通用方案。

这里篇幅简述通用的两种简单实现方法，也就是常见需求的应对方法。过于简单，这里简笔带过。

1. 使用input输入框（本文以element组件库的el-input为例）：

• 说明：

前端只要提供个文本输入框供用户输入任何内容，点击搜索后提交对应的参数（文本框值）给后端接口即可完成对应的检索。

• 效果：

 

1. 使用select选择器（本文以element组件库的el-select为例）：

• 说明：

前端提供select选择器，并给其设置上filterable属性，这样便能开启输入匹配模式，用户选中选项后点击搜索后提交对应的参数（所选中的选项值或者是其对应id等）给后端接口即可完成对应的检索。

• 效果：

三. 综合方案。

这里篇幅重点讲述既可以让用户模糊输入也可以让用户精确匹配选项进行搜索的功能实现。（这里与上文2中的方法二 ---- 使用select选择器实现相比，可以在输入框中输入任何不匹配的值并且可以留存（留存很重要）在输入框中，从而进行模块检索）。

1. html标签原生实现。

• 说明：

借助input原生标签和datalist、option标签结合使用。

• 核心代码：

<div class="about">
    <input
      id="appName"
      type="text"
      list="appNamelist"
      style="padding: 0.5em; border-radius: 10px"
    />
    <datalist id="appNamelist">
      <option>黄金糕</option>
      <option>双皮奶</option>
      <option>蚵仔煎</option>
      <option>龙须面</option>
      <option>北京烤鸭</option>
    </datalist>
    <el-button type="primary" style="margin-left: 15px">搜索</el-button>
  </div>

• 效果图：

 

1. 使用select选择器，并借助blur事件实现（本文以element组件库的el-select为例）：

• 说明：

直接在上文2中的方法二 ---- 使用select选择器实现的基础上加上blur事件，该事件处理逻辑为将target上的value值赋值给select选择器的绑定值即可。

• 核心代码：

<template>
  <div class="about">
    <el-select
      v-model="value"
      placeholder="请选择检索内容"
      style="width: 200px; margin-top: 50px"
      filterable
      clearable
      @blur="getCurVal"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-button type="primary" style="margin-left: 15px">搜索</el-button>
  </div>
</template>

<script>
export default {
  name: "About",
  data() {
    return {
      value: "",
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
    };
  },
  methods: {
    getCurVal(val) {
      console.log(val);
      this.value = val.target.value;
    },
  },
};
</script>

• 效果图：