Ante el requisito de "combinar" el cuadro de entrada y el selector de selección, ¿está entrando en pánico?

1. Introducción.

Cuando se enfrenta al requisito de búsqueda correspondiente a la lista de la tabla, generalmente solo se requiere ingresar el cuadro de texto para la búsqueda aproximada o seleccionar el selector para seleccionar elementos específicos para una búsqueda precisa. Pero, por supuesto, este artículo no describirá un punto de conocimiento tan simple, sino que le mostrará las habilidades de usar la "combinación" entre el cuadro de entrada y el selector de selección. Después de todo, puede haber un día en que su PM le permita implementar una función que permita a los usuarios ingresar vagamente y buscar opciones de coincidencia exacta.

2. Régimen general.

Aquí hay una breve descripción de dos métodos comunes de implementación simples, es decir, los métodos de respuesta a requisitos comunes. Demasiado simple, aquí hay una breve introducción. Sitio web oficial del elemento

1. Use el cuadro de entrada de entrada (este artículo toma la entrada el de la biblioteca de componentes del elemento como ejemplo):

• ilustrar:

El front-end solo necesita proporcionar un cuadro de entrada de texto para que el usuario ingrese cualquier contenido, haga clic en buscar y envíe los parámetros correspondientes (valor del cuadro de texto) a la interfaz de back-end para completar la recuperación correspondiente.

• Efecto:

2. Utilice el selector de selección (este artículo toma como ejemplo la selección el de la biblioteca de componentes de elementos):

• ilustrar:

El front-end proporciona un selector de selección y establece el atributo filtrable en él, de modo que se pueda habilitar el modo de coincidencia de entrada. Después de que el usuario selecciona una opción y hace clic en buscar, los parámetros correspondientes (el valor de la opción seleccionada o su identificación correspondiente, etc. .) se envían a la interfaz de back-end y se puede completar la búsqueda correspondiente.

• Efecto:

3. Programa integral.

El espacio aquí se enfoca en la realización de la función que le permite al usuario ingresar información aproximada y buscar opciones de coincidencia exacta . ( En comparación con el método 2 en 2 anterior ---- usando el selector de selección, cualquier valor no coincidente se puede ingresar en el cuadro de entrada y se puede retener (la retención es importante) en el cuadro de entrada , para realizar la recuperación del módulo)

1. Implementación nativa de etiquetas html.

• ilustrar:

Utilice la etiqueta nativa de entrada en combinación con la lista de datos y las etiquetas de opciones.

• Código central:

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

• Imagen de efecto:

2. Use el selector de selección e impleméntelo con la ayuda del evento de desenfoque (este artículo toma el-select de la biblioteca de componentes de elementos como ejemplo):

• ilustrar:

Agregue el evento de desenfoque directamente sobre la base del método 2 en los 2 anteriores ---- usando el selector de selección. La lógica de procesamiento de eventos es asignar el valor del valor en el objetivo al valor vinculante del selector de selección .

• Código central:

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

• Imagen de efecto: