VUE 使用 element-ui 的 el-autocomplete 组件实现输入框自动提示查询功能 超简单!!!

VUE 使用 element-ui 的 el-autocomplete 组件实现输入框提示功能

昨天是我第一次接触vue,就分配了一个把下拉框改成带提示功能的输入框的任务,这样提高用户体验,不用从好多选项选出所要的值。我踩了很多雷最后才是实现出来,希望对大家有用。

1.el-autocomplete是elementUI的一个组件,所以先把element-ui引进vue项目中:

npm i element-ui -S

2.配置一下element-ui,在VUE的main.js文件下添加如下代码:

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

3.之后就可以使用elementUI,在你要改动的.vue文件下:

<template>
//提示功能的输入框
                <el-autocomplete
                  class="el-input"
                  v-model="event.programCode"
                  :fetch-suggestions="querySearchAsync"
                  placeholder="请输入内容"
                  :trigger-on-focus="false"
                  @select="handleSelect">
                </el-autocomplete>
	
</template>

4.变现js代码实现上面代码的各个功能

export default {
  name: "",
  components: {
   
  },
  methods: { 
  //所有的方法都要写在methods里面
  querySearchAsync(queryString, cb) {
  //在这里为这个数组中每一个对象加一个value字段, 因为autocomplete只识别value字段并在下拉列中显示,所以我从新封装了
     let programs = this.programs;
   
     let programList = [];
    for(let i=0;i<this.programs.length;i++){
      programList.push({'value':programs[i].code +' '+'-'+' '+programs[i].name})
      }
      
      let results = queryString ? programList.filter(this.createStateFilter(queryString)) : programList;
	//基本思路就是实现一个过滤器,过滤存在你输入字段的所有数据。
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 1000 * Math.random());
    },createStateFilter(queryString) {
      return (program) => {
        return (program.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
      };
    },handleSelect(item) {
      this.event.programCode = item.value
    },
    //hangdleSelect你选中那行,item就就是那那条数据,直接赋值v-modal就实现回显了。

5.programs是在data中定义的,用·ajax或者其他获取到的,一般都是把下拉框改成输入框所以数据都存在,我就不做太多赘述了:

data () {
    var vueObj = this;
    return {
      programs: {},

这样就可以简单地实现输入自动提示的功能了。有问题可以加我评论区给我留言,我尽力解决。

  • 4
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
Vue使用element-ui的Input组件实现模糊查询,你可以通过v-model绑定输入框的值,并监听输入框的change事件,在事件处理函数调用接口进行查询操作。另外,你可以使用element-uiAutocomplete组件实现带有下拉提示的模糊查询效果。 示例代码如下: ```html <template> <div> <el-input v-model="keyword" @change="handleSearch" placeholder="请输入关键字"></el-input> <el-autocomplete v-model="selectedValue" :fetch-suggestions="querySearch" placeholder="请输入关键字" @select="handleSelect"> <template slot-scope="{ item }">{{ item }}</template> </el-autocomplete> </div> </template> <script> export default { data() { return { keyword: '', selectedValue: '', suggestions: [] }; }, methods: { handleSearch() { // 调用接口进行查询操作,将查询结果更新到suggestions数组 // 示例代码直接使用了一个固定的suggestions数组作为演示,请根据实际需求进行修改 this.suggestions = ['结果1', '结果2', '结果3']; }, querySearch(queryString, cb) { // 在这里可以根据输入的queryString调用接口获取匹配的结果,并通过cb回调函数返回给Autocomplete组件 // 示例代码直接使用了一个固定的suggestions数组作为演示,请根据实际需求进行修改 const results = queryString ? this.suggestions.filter(item => item.includes(queryString)) : this.suggestions; cb(results); }, handleSelect(item) { // 处理选某个下拉项的逻辑 console.log('选的项:', item); } } }; </script> ```
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值