Faced with the requirement of "combining" the input box and the select selector, are you panicking?

1 Introduction.

When faced with the search requirement corresponding to the table list, it is usually only required to input the text box for fuzzy search or select the selector to select specific items for precise search. But of course, this article will not describe such a simple knowledge point, but will show you the skills of using the "combination" between the input box and the select selector . After all, there may be a day when your PM will let you implement a function that allows users to both vaguely input and search for exact matching options.

2. General scheme.

Here is a brief description of two common simple implementation methods, that is, the response methods to common requirements. Too simple, here is a brief introduction. Element official website

1. Use the input input box (this article takes the el-input of the element component library as an example):

• illustrate:

The front-end only needs to provide a text input box for the user to input any content, click search and submit the corresponding parameters (text box value) to the back-end interface to complete the corresponding retrieval.

• Effect:

2. Use the select selector (this article takes the el-select of the element component library as an example):

• illustrate:

The front-end provides a select selector and sets the filterable attribute on it, so that the input matching mode can be enabled. After the user selects an option and clicks search, the corresponding parameters (the selected option value or its corresponding id, etc.) are submitted to the back-end interface. The corresponding search can be completed.

• Effect:

3. Comprehensive program.

The space here focuses on the realization of the function that allows the user to enter both fuzzy input and search for exact matching options . ( Compared with method 2 in 2 above ---- using the select selector, any unmatched value can be entered in the input box and can be retained (retention is important) in the input box , so as to perform module retrieval )

1. Native implementation of html tags.

• illustrate:

Use the input native tag in combination with the datalist and option tags.

• Core code:

<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>
复制代码

• Effect picture:

2. Use the select selector and implement it with the help of the blur event (this article takes el-select of the element component library as an example):

• illustrate:

Add the blur event directly on the basis of method 2 in the above 2 ---- using the select selector. The event processing logic is to assign the value value on the target to the binding value of the select selector .

• Core code:

<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>
复制代码

• Effect picture: