实现 el-input 输入值，模糊搜索显示下拉选项功能代码

浅浅的花香味﹌ 2022-11-04 11:28 173阅读 0赞

![在这里插入图片描述][20210302150602822.png_pic_center]

<el-autocomplete class="inline-input" v-model="scope.row.proId" :fetch-suggestions="proIdSearch" placeholder="请输入内容" @select="proIdSelect" ></el-autocomplete>

data() { 
    	return { 
    		 restaurants: [],
    	}
    }
    
    // 1. 先获取数据
    getProductList() { 
      listProduct(this.productParams).then(response => { 
        let restaurants = response.rows
        restaurants.map((item, index) => { 
          this.restaurants.push({  // 只展示这个数组里的value值，受理商标等
            value: item.proName,
            price: item.price
          })
        })
      })
    },
    
    // 2. 模糊搜索，输入值与获取到的数据进行比较
    proIdSearch(queryString, cb) { 
      var restaurants = this.restaurants
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      cb(results);
    },
    createFilter(queryString) { 
      return (state) => { 
        return (state.value.indexOf(queryString) === 0)
      }
    },
    
    // 3. 选中值后，需要做的处理
    proIdSelect(item) { 
      this.quotationDetails.filter(value => { 
        if (value.proId && value.proId === item.value) { 
          value.price = item.price
        }
      })
    },

[20210302150602822.png_pic_center]: /images/20221023/d423331cbd114037ac230385eb18a01c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，173人围观）

还没有评论，来说两句吧...

相关阅读

相关 JComboBox 下拉选项显示图标

JComboBox 下拉选项显示图标 1.需求描述 2.代码实现 3.效果演示 > 系统：Win10 > JDK：1.8.0\_333 > I

妖狐艹你老母/ 2024年04月07日 14:43/ 0 赞/ 80 阅读

相关 Python实现模糊搜索功能

Python实现模糊搜索功能随着信息时代的来临，我们获取信息的方式也愈发方便快捷。但是，在信息爆炸的时代，我们往往需要从大量的数据中查找我们所需要的信息，这时就需要用到搜索

快来打我*/ 2024年03月23日 16:08/ 0 赞/ 60 阅读

相关 vue 高德地图即时搜索模糊搜索下拉搜索

index.html里面引入amap：首先你要去 [https://lbs.amap.com/][https_lbs.amap.com] 注册一个属于自己的key 注

灰太狼/ 2023年05月30日 06:01/ 0 赞/ 26 阅读

相关前端实现js模糊查询关键字显示下拉框功能的实例教程

所谓模糊查询就是通过关键字在数据中匹配到包含关键字的数据，而得出的查询结果。本实例教程讲解在前端文本框输入关键字，显示匹配的数据列表功能。首先得准备一个文本框和显示数据列表

柔情只为你懂/ 2023年05月22日 13:25/ 0 赞/ 13 阅读

相关 jsp 输入框同时支持手工输入（模糊搜索）和下拉选

<input type="text" id="userOption" list="InfoList"> <datalist id="InfoList">

刺骨的言语ヽ痛彻心扉/ 2022年12月27日 14:17/ 0 赞/ 103 阅读

相关实现fastadmin搜索栏中动态下拉列表搜索功能

使用fastadmin自动生成的后台，搜索栏中含有分类搜索项时，默认显示的是文本框搜索，我们想要实现动态下拉列表搜索。实现如下效果。 ![在这里插入图片描述][waterm

左手的ㄟ右手/ 2022年12月03日 08:55/ 0 赞/ 957 阅读

相关 js 实现模糊搜索功能

最近遇到一个需要前端对已有数据做模糊查询的功能。方法有很多种，个人比较推荐使用正则表达式来实现，下面是我实现的方法：封装一个公用的方法： //list 是已有的数

绝地灬酷狼/ 2022年11月12日 14:52/ 0 赞/ 1063 阅读

相关实现 el-input 输入值，模糊搜索显示下拉选项功能代码

![在这里插入图片描述][20210302150602822.png_pic_center] <el-autocomplete class="inline-input

浅浅的花香味﹌/ 2022年11月04日 11:28/ 0 赞/ 174 阅读

相关 bootstap下拉选择框实现模糊搜索

博主最近在完成公司的一个需求，需要使用到下拉选择框模糊搜索，爬了一次坑，跟大家分享一下，因为使用的是bootstrap的插件，所以也是百度了下如何实现，在这个过程

不念不忘少年蓝@/ 2022年03月07日 05:54/ 0 赞/ 589 阅读

相关基于jQuery两种方式实现下拉框模糊搜索

基于select2 <script type="text/javascript" src="../../assets/js/plugins/select2/sel

叁歲伎倆/ 2021年12月15日 23:51/ 0 赞/ 821 阅读