项目中用到了elementUI中的远程搜索即 el-autocomplete 组件,估计首次使用的都会遇到一些小问题,只要你能认真看完并且耐心理解,保证能帮到你,效果图如下:

组件代码:

 <el-autocomplete   :popper-class="`cname${index}`" v-model="itemsData" :fetch-suggestions="querySearch"  :debounce=0  @select="handleSelect" v-for="(Item, Index) in itemsData" :key="Index" @focus="oop('cname'+index)"></el-autocomplete> 

js代码:

  data() {
return {
cname: ""
};
}, methods: {
oop(e) {
//这里能获取到点击的input框的自定义类名,这里我命为cname0,cname1,cname3,...
this.cname = e;
}, querySearch(queryString, cb) {
//queryString是input的值,cb是回调函数;
var tem_list = [];
API.wordSuggest({ word: queryString })
.then(rs => {
//这里假设返回的rs是参数为 {word:山西} 的数据,rs= ["山西一零九医院", "山西万荣技师学院", "山西万辉制药", "山西三化饮料", "山西三奇疗养院", "山西三立化工", "山西三通电子", "山西三针脑血管病医院", "山西三院", "山西下"];
rs.map((item, index) => {
var tem_obj = {};
tem_obj.value = item;
tem_list.push(tem_obj);
});
var restaurants = tem_list;
      // 在样式里所有的下拉列表都隐藏了,这里判断如果数据不为空则通过指定的class名显示下拉列表,
// 这时候的restaurants就是要elementUI规定的格式:[{value:"山西一零九医院"}, {value:"山西万荣技师学院"}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
var $cname = document.querySelector("." + this.cname);
restaurants.length > 0 ? ($cname.style.display = "block") : "";
var results = queryString? restaurants.filter(this.createFilter(queryString)): restaurants;
// 调用 callback 返回建议列表的数据
cb(results);
})
.catch(error => {console.log(error);});
},
createFilter(queryString) {
return state => {
return (
state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
);
};
}
}, <style>
.el-autocomplete-suggestion {
  display: none;
}
</style>

下面是问题和解决方案,可以结合代码理解

问题1:数据不显示

解决方案:

  那是因为数据的格式有要求,必须是一个数组对象,并且属性名为“value”,不管你怎么处理,最后变成我上面restaurants的格式(比如:[{ value : "山西一零九医院" }])即可;

问题2:没有数据时下拉列表会闪一下

解决方案:

  1. el-autocomplete有个自带的属性 debounce(输入建议的去抖延时),把它设为0;
  2. 写自定义样式让所有下拉列表隐藏:.el-autocomplete-suggestion{display:none;}
  3. 在querySearch函数中让数据不为空的下拉列表显示(实现方法是通过自定义class名,然后让指定的class显示)

解决 el-autocomplete 不显示及没数据时闪一下的问题的更多相关文章

  1. 解决Python向MySQL数据库插入中文数据时出现乱码

    解决Python向MySQL数据库插入中文数据时出现乱码 先在MySQL命令行中输入如下语句查看结果: 只要character_set_client character_set_database ch ...

  2. easyui datagrid 没数据时显示滚动条的解决方法

    今天解决了一个bug,因为datagrid有多列,可是当没有数据的时候,后面的列无法通过滚动条拉动来显示,比较麻烦,而需求要求没有数据也要拉动滚动条查看后面有什么列,一开始在网上找了一些资料,发现都不 ...

  3. 【已解决】C#中往SQLServer插入数据时遇到BUG

    错误信息如下: “System.Data.SqlClient.SqlException”类型的未经处理的异常在 System.Data.dll 中发生 其他信息: “”附近有语法错误. 文字版代码如下 ...

  4. 解决echarts饼图不显示数据为0的数据

    如图所示 饼图数据为0但是还是会显示lableline和lable 解决方法 var echartData = [{ value: data_arry[0]==0?null:data_arry[0], ...

  5. JSP页面使用EL表达式不显示实际数据

    今天在学习有关jsp的相关知识内容时,遇到了el表达式只是显示括号里面的内容 代码如下: <%@ page contentType="text/html;charset=UTF-8&q ...

  6. easyui的datagrid无数据时下方滚动条不显示的解决办法(标题栏显示不完全)

    easyui在写datagrid的时候标题栏有时候因为太多.太长所以无法显示所有的列,而且没数据的时候下方的滚动条是不显示的,这样就无法显示所有的列了.解决办法如下: onLoadSuccess: f ...

  7. bug解决思路——插入数据时,前台不展示数据

    积攒一下平时解决bug时的思路,以后若是一头乱麻时翻出来看看~ 一个bug五一之前就和现场在定位,直到今天才算是定位到问题. 所有bug,还是得重现出来才可以发现问题.现场说登记记录时数据没在前台展示 ...

  8. 解决pl/sql developer中数据库插入数据乱码问题

    最近学习SSM项目开发,用到oracle数据库, 使用管理软件PL/sql developer往数据库表中插入数据时记录乱码.  结果如下: 可以看到中文数据都乱码成了???????问号, 看了网上各 ...

  9. 爬虫爬数据时,post数据乱码解决办法

    最近在写一个爬虫,目标网站是:http://zx.bjmemc.com.cn/,可能是为了防止被爬取数据,它给自身数据加了密.用谷歌自带的抓包工具也不能捕获到数据.于是下了Fiddler.     F ...

随机推荐

  1. JavaScript--阻止事件冒泡stopPropagation和cancelBubble

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/html"> ...

  2. img标签src不给路径就会出现边框

    <img/>在src加载失败或没有给的,浏览器会自动给img加上边框. 如下图这样: 产品觉得影响美观,一定要pass掉. 原码是这样: .ctn{ position: relative; ...

  3. Permutations II 去掉重复的全排列

    Given a collection of numbers that might contain duplicates, return all possible unique permutations ...

  4. awss3

    import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; import java.io ...

  5. day39 07-Spring的AOP:自动代理

    带有切点的切面或者是不带有切点的切面配置一个类就要配置一段生成代理的代码,这样太麻烦了. 选中orderDao右键watch JDK动态代理是先创建被代理对象,然后在创建代理对象的时候传入被代理对象. ...

  6. HDU 4217

    点击打开题目链接 题型就是数据结构.给一个数组,然后又k次操作,每次操作给定一个数ki, 从数组中删除第ki小的数,要求的是k次操作之后被删除的所有的数字的和. 简单的思路就是,用1标记该数没有被删除 ...

  7. 将nginx搜集到的日志通过flume转到hive

    背景介绍: Nginx为app打点数据,打点日志每小时滚动一次.目录结构如下 文件中的数据如下( cat -A 2019072414r.log 后的结果,-A为显示隐形的符号,下方^A为指定的分隔符. ...

  8. php上传文件与图片到七牛的实例详解

    上传文件到七牛最简单的方式就是使用七牛官方最新的SDK 用composer安装PHP SDK composer require qiniu/php-sdk 上传文件到七牛 use Qiniu\Auth ...

  9. Java练习 SDUT-1140_面向对象程序设计上机练习一(函数重载)

    面向对象程序设计上机练习一(函数重载) Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 利用数组和函数重载求5个数最大值 ...

  10. Go 语言开发工具

    Go 语言开发工具 LiteIDE LiteIDE是一款开源.跨平台的轻量级Go语言集成开发环境(IDE). 支持的操作系统 Windows x86 (32-bit or 64-bit) Linux ...