element UI的带输入建议el-autocomplete 如果输入的值 列表里面没有怎么处理 代码展示

如果输入的值在列表里面没有，可以给el-autocomplete组件绑定一个`@select`事件，当用户选择某个选项时触发该事件。在该事件的处理函数中，可以判断用户选择的选项是否是输入的值，如果是，则将该值添加到列表中。

以下是一个示例代码：

<el-autocomplete
  v-model="inputValue"
  :fetch-suggestions="querySearch"
  @select="handleSelect"
></el-autocomplete>

data() {
  return {
    inputValue: '',
    options: ['apple', 'banana', 'orange']
  }
},
methods: {
  querySearch(queryString, cb) {
    // 根据输入的值过滤选项
    const results = this.options.filter(option => {
      return option.indexOf(queryString) !== -1
    })
    cb(results)
  },
  handleSelect(item) {
    if (!this.options.includes(item)) {
      // 如果选择的选项不在列表中，则添加到列表中
      this.options.push(item)
    }
  }
}

相关问题

element UI的带输入建议el-autocomplete 如果输入的值 列表里面没有则清楚输入框 代码展示

你可以在 `el-autocomplete` 的 `@change` 事件中监听输入框的值变化，然后判断输入框的值是否存在于列表中。如果不存在，则清空输入框的值。代码示例如下：

<template>
  <el-autocomplete
    v-model="value"
    :fetch-suggestions="querySearch"
    @change="handleChange"
  ></el-autocomplete>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      suggestions: ['apple', 'banana', 'orange']
    };
  },
  methods: {
    querySearch(queryString, cb) {
      const suggestions = this.suggestions.filter(item => {
        return item.toLowerCase().indexOf(queryString.toLowerCase()) !== -1;
      });
      cb(suggestions);
    },
    handleChange(value) {
      if (this.suggestions.indexOf(value) === -1) {
        this.value = '';
      }
    }
  }
};
</script>

在上面的代码中，我们定义了一个 `suggestions` 数组，其中包含了几个水果的名称。在 `querySearch` 方法中，我们根据输入框的值过滤出匹配的建议项。在 `handleChange` 方法中，我们判断输入框的值是否存在于 `suggestions` 数组中，如果不存在，则清空输入框的值。

element ui el-autocomplete

Element UI 中的 el-autocomplete 是一个自动完成输入框组件，可以帮助用户输入并从预设的选项中选择。

要使用 el-autocomplete 组件，首先需要引入 Element UI 的样式和 JavaScript 文件。然后在您的 Vue 组件中使用 el-autocomplete 组件即可。

以下是一个简单的示例代码，展示如何使用 Element UI 的 el-autocomplete 组件：

<template>
  <div>
    <el-autocomplete
      v-model="selectedValue"
      :fetch-suggestions="querySearch"
      placeholder="请输入内容"
      @select="handleSelect"
    ></el-autocomplete>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '',
      options: ['选项1', '选项2', '选项3', '选项4']
    };
  },
  methods: {
    querySearch(queryString, cb) {
      const results = queryString ? this.options.filter(option => option.includes(queryString)) : this.options;
      // 模拟异步请求，可以根据实际情况进行调整
      setTimeout(() => {
        cb(results);
      }, 200);
    },
    handleSelect(value) {
      console.log('Selected value:', value);
    }
  }
};
</script>

在上面的代码中，我们通过 `v-model` 指令将用户选择的值绑定到 `selectedValue` 变量上。通过 `fetch-suggestions` 属性指定一个函数来获取匹配的选项列表，这里我们使用 `querySearch` 方法来实现自定义的搜索逻辑。`placeholder` 属性用于设置输入框的提示文本。通过 `@select` 事件监听选择事件，并在 `handleSelect` 方法中处理选择事件。

以上是一个基本的使用示例，您可以根据自己的需求进行定制和扩展。希望能对您有所帮助！如果您还有其他问题，请随时提问。