饿了么UI自带的两种远程搜索（模糊查询）的用法大全

2024-02-06 04:17:02

饿了么UI自带的两种远程搜索（模糊查询）用法详解

前言

远程搜索，又称模糊查询，是一种在用户输入时自动查询并显示相关结果的功能。在饿了么UI中，提供了两种实现远程搜索的组件：el-autocomplete和el-select。

el-autocomplete

el-autocomplete组件可以自动完成用户的输入，并提供下拉列表供用户选择。要使用el-autocomplete组件，您需要先安装饿了么UI，然后在您的组件中导入el-autocomplete组件。

import { ElAutocomplete } from 'element-ui';

Vue.component('el-autocomplete', ElAutocomplete);

接下来，您需要在您的模板中添加el-autocomplete组件。

<el-autocomplete v-model="value" :fetch-suggestions="fetchSuggestions"></el-autocomplete>

其中，value属性是用于绑定输入框的值，fetch-suggestions属性是用于指定远程搜索的函数。

methods: {
  fetchSuggestions(queryString, callback) {
    // 在这里发送Ajax请求，并将结果数据传递给callback函数
    // callback([
    //   { value: '选项1', label: '选项1' },
    //   { value: '选项2', label: '选项2' },
    //   // 等等
    // ]);
  }
}

el-select

el-select组件可以提供一个下拉列表，用户可以选择一个或多个选项。要使用el-select组件，您需要先安装饿了么UI，然后在您的组件中导入el-select组件。

import { ElSelect } from 'element-ui';

Vue.component('el-select', ElSelect);

接下来，您需要在您的模板中添加el-select组件。

<el-select v-model="value" :filterable="true" :remote="true" :remote-method="fetchSuggestions"></el-select>

其中，value属性是用于绑定输入框的值，filterable属性表示是否启用过滤功能，remote属性表示是否启用远程搜索，remote-method属性是用于指定远程搜索的函数。

methods: {
  fetchSuggestions(queryString, callback) {
    // 在这里发送Ajax请求，并将结果数据传递给callback函数
    // callback([
    //   { value: '选项1', label: '选项1' },
    //   { value: '选项2', label: '选项2' },
    //   // 等等
    // ]);
  }
}

比较

el-autocomplete组件和el-select组件都可以实现远程搜索，但是它们之间还是有一些区别的。el-autocomplete组件可以自动完成用户的输入，而el-select组件则需要用户手动输入。el-autocomplete组件只能选择一个选项，而el-select组件可以选择一个或多个选项。