1. 模板代码

  1. <el-autocomplete :minlength="2" v-model="searchName" :fetch-suggestions="querySearchAsync" placeholder="请输入内容"
  2. @select="handleSelect"></el-autocomplete>

2. js 代码

  1. querySearchAsync(queryString, cb) {
  2. if (queryString && queryString.length > 2) {
  3. let params = { name: queryString }
  4. this.axios.get("/api/search/name", { params }).then(res => {
  5. if (res.data.code == 200) {
  6. cb(res.data.data);
  7. }
  8. })
  9. }
  10. },
  11. handleSelect(item) {
  12. console.log(this.searchName, item);
  13. },

element之input输入搜索联想框的更多相关文章

  1. element ui input 输入时触发事件

    <el-form-item label="客户名" :label-width="labelWidth"> <el-input v-model= ...

  2. input 输入速度和方向判断、搜索功能的延迟请求

    1.input 输入速度和方向判断 var wxApp = {} wxApp.click = function (str,speed) { var lastInput = { d: "&qu ...

  3. 搜索框中“请输入搜索keyword”

    $(function(){    $("#ctl00_txtKey").val("请输入搜索keyword").addClass("search&qu ...

  4. input输入样式,动画

    模板描述:input输入样式 动画,有输入框也有搜索框的样式,多种多样,大家根据自己的喜欢来. 找网站SEO教程,网站模板,以及想要建立个人博客的朋友来涂志海个人博客网,这里有你想要的一切(万一没有的 ...

  5. JavaScript实现搜索联想功能

    -.虽然Jquery已经有了一个完整的包 实现前端搜索联想功能,但是出于学习还是想了解一下实现此功能的原理性 回想起来 实现此功能很简单,1.前端输入字符串 文本改变 异步请求服务器 将返回的资料显示 ...

  6. 限制input输入类型(多种方法实现)

    1.只能输入和粘贴汉字 <input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste= ...

  7. jquery+php实现用户输入搜索内容时自动提示

    index.html <html> <head>     <meta charset=;} #search_auto li a:hover{background:#D8D ...

  8. Selenium2学习-009-WebUI自动化实战实例-007-Selenium 8种元素定位实战实例源代码(百度首页搜索录入框及登录链接)

    此 文主要讲述用 Java 编写 Selenium 自动化测试脚本编写过程中,通过 ID.name.xpath.cssSelector.linkText.className.partialLinkTe ...

  9. 实时监听input输入内容的N种方法

    现在有一个需求,需要我们实时监听input输入框中的内容,从而带来更好的用户体验,而不是等我们全部输入完毕才告诉我们格式不对首先我们创建一个input输入框 <form name='loginF ...

随机推荐

  1. uni-app 使用Vuex+ (强制)登录

    一.在项目的根目录下新建一个store文件夹,然后在文件夹下新建一个index.js文件 二.在新建的index.js下引入vue和vuex,具体如下: //引入vue和vuex import Vue ...

  2. Delphi实现树型结构具体实例

    unit Unit1;interfaceuses  Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms, ...

  3. 看看可爱c#中的delegate(委托)和event(事件)用法好不好

    一.开篇忏悔 对自己最拿手的编程语言C#,我想对你说声对不起,因为我到现在为止才明白c#中的delegate和event是怎么用的,惭愧那.好了,那今天就趁月黑风高的夜晚简单来谈谈delegate和e ...

  4. Caché,Cache数据库下载

    Caché数据库主要用于医疗领域,国内的开发人员比较少接触,使用环境相对封闭,前段时间刚才用到,下载也费了许多时间,特记录一下,帮助那些需要的人. 顺便说一下,TreeSoft数据库管理系统,目前支持 ...

  5. 解决mosh: Nothing received from server on UDP port 60001 环境: centos7.1

    主要问题在于有的教程使用iptables命令来开启对应端口, 但是centos7.1中虽然iptables仍然存在, 但是没有默认安装相关服务, 而是使用firewalld来管理防火墙. 所以我开始以 ...

  6. Java文章翻译

    一.基础 1.String 使用" "还是构造函数创建字符串? 画图说明字符串的不变性 在Java中字符串为什么是不可变的 Java中的字符串是按引用传递? 排名前十的Java字符 ...

  7. idea把maven依赖树输出到控制台

    第一步 选中红色方框 第二步 点进去 输入命令:mvn dependency:tree 如果要输出到文件,找到pom文件的位置 进入命令行 输入: mvn dependency:tree >d: ...

  8. 小程序php支付,前后端分离

    小程序端: xml: <button type="default" bindtap="payOrder">支付</button> js: ...

  9. [百度贴吧]飞腾1500a .VS. 龙芯3a3000: 同频实用性能对比

    贴吧关于 龙芯与飞腾的简单对比. https://tieba.baidu.com/p/5682824804?red_tag=0221728732 龙芯3a3000实用性能 ,还不如4年前发布的FT15 ...

  10. Devexpress WinForm TreeList的三种数据绑定方式(DataSource绑定、AppendNode添加节点、VirtualTreeGetChildNodes(虚拟树加载模式))

    第一种:DataSource绑定,这种绑定方式需要设置TreeList的ParentFieldName和KeyFieldName两个属性,这里需要注意的是KeyFieldName的值必须是唯一的. 代 ...