element带输入建议el-autocomplete的使用

目录
  • 引用el-autocomplete
  • 触发带输入建议的两种方式
  • 转成输入建议回调的数据结构
  • 增加回车触发事件
  • 解决回车后建议输入框没消失的bug

vue+element UI

element UI的带输入建议官方文档:https://element.eleme.cn/#/zh-CN/component/input

建议先看官方文档,这里是官方文档的适当补充

引用el-autocomplete

1、在需要的地方引用

<el-autocomplete
      class="inline-input"
      v-model="inputValue"
      :fetch-suggestions="querySearch"
      placeholder="请输入内容"
      @select="handleSubmit"
    ></el-autocomplete>

v-model="inputValue" :与inputValue绑定值,也就是说,自动输入建议的值可以通过inputValue拿到。

:fetch-suggestions="querySearch" : 返回输入建议的方法,也就是说输入框一获取焦点。就会自动调用该方法拿到数据,这些数据就是输入建议的数据。

@select="handleSelect" : 当选中建议项时,调用该方法。

2 、

<script>
export default {
  name: "searchBar",
  //allInfos是父组件传来的值,如果allInfos不是父组件传来的就不用这样写
  props: ["allInfos"],
  data() {
    return {
      inputValue: "",
    };
  },
 
  methods: {
    handleSubmit() {
     //根据自身情况
     //该方法是提交时触发
    },
    //输入框获取焦点时调用的方法
    querySearch(queryString, cb) {
    //allInfos是怎么来,是从父组件传过来的还是在自己组件调用api接口拿到的还是其他
    //我这里的allInfos是从父组件传过来的,在这里也举例子组件从父组件传值
      let results = this.allInfos;
      results = queryString
        ? results.filter(this.createFilter(queryString))
        : results;
    //cb是回调函数,返回筛选出的结果数据到输入框下面的输入列表
      cb(results);
    },
    //该方法仿写官方文档,如果没有特别的需求,该方法改动不大
    //这是当输入数据时触发的,筛选出和输入数据匹配的建议输入。
    //我这里用的是调用match方法,是模糊匹配;官方调用的是indexOf,是精确匹配,看自身情况选择
    createFilter(queryString) {
      return (item) => {
        return item.value.toUpperCase().match(queryString.toUpperCase());
      };
    },
  },
};
</script>

触发带输入建议的两种方式

1.输入框获取焦点时就触发
这是默认的

2.输入值后匹配触发
在组件上加上:trigger-on-focus="false"

<el-autocomplete
      class="inline-input"
      v-model="inputValue"
      :fetch-suggestions="querySearch"
      :trigger-on-focus="false"
      placeholder="请输入内容"
      @select="handleSubmit"
    ></el-autocomplete>

转成输入建议回调的数据结构

大家也看到了文档里面,回调的数据结果,是一个数组,数组的每一项是一个对象,对象里一定要有一个value的属性,这些是必须的。如果数据结构不长这样,那么待输入建议的数据是无法渲染出来的。

[
          { "value": "xxx(在输入建议看到的值,必需)", "address": "看自身情况" },
]

那么问题来了,如果拿出来的数据不是这样结构,该怎么办?以我的情况举个例子。

我拿到的数据是这样的,虽然也是数组,但是数组里的对象属性不一样。

this.modelInfos=
[
          { "modelId": "1", "modelName": "a1",type:"c" },
          { "modelId": "2", "modelName": "a2",type:"c" },
          { "modelId": "3", "modelName": "a3",type:"c" },
          { "modelId": "4", "modelName": "a4",type:"c" },
]

用map返回想要的数据结构。

 this.allInfos= this.modelInfos.map((terminal) => {
        return {
          value: modelName,
          name: modelId,
        };
      });

可以log打印一下,就会发现allInfos的结构就变成了想要的亚子。

增加回车触发事件

在组件里增加 @keyup.enter.native方法

<el-autocomplete
      class="inline-input"
      v-model="inputValue"
      :fetch-suggestions="querySearch"
      :trigger-on-focus="false"
      placeholder="请输入内容"
      @select="handleSubmit"
      @keyup.enter.native="handleSubmit"
    ></el-autocomplete>

解决回车后建议输入框没消失的bug

如果增加了回车事件,那么输入数据回车后,输入建议框没有自动消失,该如何解决?

在组件又增加方法:@input(在输入值发生改变的时候触发changeStyle方法)

@keyup(按键松开触发的事件,也就是回车时触发changeStyle方法)

传入的“block”是让输入框建议展开,'.el-autocomplete-suggestion'是输入建议框的类名

<el-autocomplete
      class="inline-input"
      v-model="inputValue"
      :fetch-suggestions="querySearch"
      :trigger-on-focus="false"
      placeholder="请输入内容"
      @select="handleSubmit"
      @keyup.enter.native="handleSubmit"
      @input="changeStyle('block', '.el-autocomplete-suggestion')"
      @keyup="changeStyle('block', '.el-autocomplete-suggestion')"
    ></el-autocomplete>
    //根据传进来的状态改变建议输入框的状态(展开|隐藏)
    changeStyle(status, className) {
      let dom = document.querySelectorAll(className);
      dom[0].style.display = status;
    },

在handleSubmit的时候调用changeStyle方法,传入的状态为none(表示让输入建议框隐藏)

handleSubmit() {
      this.changeStyle("none", ".el-autocomplete-suggestion");    
    },

到此这篇关于element带输入建议el-autocomplete的使用的文章就介绍到这了,更多相关element el-autocomplete内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 基于Vue el-autocomplete 实现类似百度搜索框功能

    效果图如下所示: 首先上代码 <template> <div class="assets-search height-all"> <div class="search-layout"> <div class="search-title">让数据触手可及</div> <div class="search-input-layout"> <!--<e

  • Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)

    官网的demo献上 在elementui Input输入框中可以找到远程搜索组件,获取服务端的数据 官网中的数据list都是写在loadAll()中的,而如果我们此时要用到mock的数据就要在此基础上对代码进行修改. -mock数据的获取- 我们要获取远程mock中所有学生的学号信息,根据输入的数据来远程查找目标,并且在选中该目标后能够自动填充对应的姓名.生日.手机等信息,实现快速获取信息的功能,再也不用手动一个个去输入所有的数据啦- 在template中添加el-autocomplete <e

  • element带输入建议el-autocomplete的使用

    目录 引用el-autocomplete 触发带输入建议的两种方式 转成输入建议回调的数据结构 增加回车触发事件 解决回车后建议输入框没消失的bug vue+element UI element UI的带输入建议官方文档:https://element.eleme.cn/#/zh-CN/component/input 建议先看官方文档,这里是官方文档的适当补充 引用el-autocomplete 1.在需要的地方引用 <el-autocomplete       class="inline

  • el autocomplete支持分页上拉加载使用详解

    目录 el-autocomplete使用 template 实现需求分析 输入框为空时聚焦或失焦后又重新聚焦不会触发请求数据接口 缓存上一次已查询的数据&搜索条件:blurArr.blurTxt 滚动加载指令(监听容器的scroll事件并进行防抖处理) 分页加载 获取数据,并进行格式化 关闭加载圈 分页加载事件 清空输入框,重置上次记录的数据 选中时记录相关数据 数据展示不稳定问题 完整的 scss 文件 完整的 js 文件 el-autocomplete使用 效果图 template <t

  • element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)

    前段时间,在实现带输入建议并且支持模糊查询输入框的时候,发现了两个值得注意的小地方.整理出来,以供借鉴. 废话不多说,直接来解决问题. 踩坑问题描述: 问题一: 获取到后端返回的数组,并将数组传入作为 results 传入 callback 后,焦点放在 输入框 上的时候,并未出现任何内容,只出现了一个不完整的空白框. 问题解决方案: 这个问题开始我以为是传进 callback 的 data 格式不对.Element官网上是这么写的: 我传入的是对象数组,是没问题的. 后来我仔细阅读了 Elem

  • Element输入框带历史查询记录的实现示例

    需求描述 页面的查询框增加一下显示历史查找记录 实现及踩坑记录 使用Element带输入建议的输入框来实现此需求.用法详见官网 1. 坑1:不能直接在querySearch里返回数组,一定要调用回调函数cb来处理数据 看了一下例子,建议列表应该是个数组,然后我就在querySearch里直接返回了一个数组: querySearch(queryString, cb) { return JSON.parse(localStorage.getItem('srcOrderNoArr')) }, 但是回到

  • element的表单元素使用总结

    表单元素挺多的,这里简单总结下,我以我的方式主要分为:文本框类.选择类.其他类 文本框类 选择类 其他类 TL;DR 时间类的选择器,均可设置输入框的显示样式和值的形式,属性分别为format.value-format 单选框和复选框,选中项属性的label值就是model的值 复选框,如果是多选的话,务必设置model值是数组 文本框类 这里我统一将有文本框的元素放在一起.主要有:普通文本框.密码框.文本域.计数器.日期选择器.自动填充文本框.有前缀的文本框. 普通文本框:disabled是否

  • jquery实现的鼠标拖动排序Li或Table

    1.前端页面 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="拖动排序Li或Table.aspx.cs" Inherits="拖动排序Li或Table" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http

  • Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解

    一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({// 选项}) 虽然没有完全遵循 MVVM 模型,Vue 的设计无疑受到了它的启发.因此在文档中经常会使用 vm (ViewModel 的简称) 这个变量名表示 Vue 实例. 1.vue.js就是一个构造器,通过构造器Vue来实例化一个对象:例如:var vm = new Vue({}); 2.实例化Vue时,需要传入一个参数(选项

  • backbone简介_动力节点Java学院整理

    简介 Web 应用程序越来越关注于前端,使用客户端脚本与 Ajax 进行交互.由于 JavaScript 应用程序越来越复杂,如果没有合适的工具和模式,那么 JavaScript 代码的高效编写.非重复性和可维护性方面会面临挑战.模型-视图-控制器 (MVC) 是一个常见模式,可用于服务器端开发以生成有组织以及易维护的代码.MVC 支持将数据(比如通常用于 Ajax 交互的 JavaScript Object Notation (JSON) 对象)从表示层或从页面的文档对象模型 (documen

  • 简单了解Backbone.js的Model模型以及View视图的源码

    Backbone.Model 今天我们先来谈谈Backbone.js MVC 中的 M , Model是backbone的核心部分,包含着页面展示内容的数据,还有围绕着数据操作的各种 转换,校验,计算 ,权限控制,服务端交互等等操作,你可以通过 Backbone.Model.extend() 生成你的model , 当然生成的model也可以作为一个基类去向下扩展更多的model var People = Backbone.Model.extend({ }); var Man = People.

  • angularJS 入门基础

    angular 所有用到的库, 全部用的CDN: 复制代码 代码如下: <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>     <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script>     <link h

随机推荐