The input input box is used in combination with the select selector

I. Introduction.

When faced with the search requirements corresponding to the table list, it is usually only required to search fuzzy in the input text box or to select specific items in the selector for precise search. But of course this article will not describe such a simple knowledge point, but will show you the skills of "combining" the input input box and the selector . After all, maybe one day, your PM lady will let you implement a function that allows users to enter fuzzy inputs and search for exact matching options.

2. General scheme.

Here is a brief description of two general and simple implementation methods, which are the solutions to common requirements. Too simple, here is a brief introduction.

1. Use the input input box (this article uses 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:

 

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

• illustrate:

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

• Effect:

3. Comprehensive programme.

This section focuses on the implementation of functions that allow users to enter fuzzy inputs and search for exact matching options . ( Here, compared with the second method in the above 2 - using the select selector, you can enter any unmatched value in the input box and save it (retention is very important) in the input box, so as to perform module retrieval ).

1. Native implementation of html tags.

• illustrate:

Use input native tags in combination with 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>

• Renderings:

 

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

• illustrate:

Directly add the blur event on the basis of the second method in the above 2 - using the select selector . The event processing logic is to assign the 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>

• Renderings: