vue.js项目 el-input 组件 监听回车键实现搜索功能示例

基于element-ui 组件 开发的vue.js项目, 实现回车键发起搜索,和原生的input 标签使用方法不一样:

el-input 监听键盘按下状态 得用@keyup.enter.native,如果是非el-input 组件,可以直接用@keyup.enter

<el-input placeholder="搜索" icon="search" v-model="input" :on-icon-click="pchandleIconClick" @keyup.enter.native="searchEnterFun"> </el-input>

<input placeholder="搜索" type="text" @keyup.enter="searchEnterFun">

在methods方法集里,写上监听的方法,当获取的keyCode 为13时,表示按下了回车键,如果需要监听空格或者其他键,换成别的键值

searchEnterFun:function(e){
   var keyCode = window.event? e.keyCode:e.which;
  // console.log('回车搜索',keyCode,e);
   if(keyCode == 13 && this.input){
   this.$router.push({path:'/Share?keywords='+this.input});
   }

  }

which 和 keyCode 属性提供了解决浏览器的兼容性的方法。

keyCode属性返回onkeypress事件触发的键的值的字符代码,或者 onkeydown 或 onkeyup 事件的键的代码

注意:

在 Firefox 中,keyCode 属性在 onkeypress 事件中是无效的 (返回 0)。浏览器兼容问题,可以一起使用 which 和 keyCode 属性来解决:

var keyCode = window.event ? e.keyCode:e.which;

which 属性返回onkeypress事件触发的键的值的字符代码,或者 onkeydown 或 onkeyup 事件的键的代码

浏览器支持:谷歌、火狐、ie9、safari、欧朋

以上这篇vue.js项目 el-input 组件 监听回车键实现搜索功能示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

时间: 2018-08-22

vue下拉菜单组件(含搜索)的实现代码

之前也写过这个小组件,最近遇到select下加搜索的功能,所以稍微完善一下. 效果图: 子组件 dropdown.vue <template> <div class="vue-dropdown default-theme"> <div class="cur-name" @click="isShow =! isShow">{{itemlist.cur.name}}</div> <div clas

基于vue实现可搜索下拉框定制组件

实践加深对vue的理解和运用有效途径,本文是基于vue的可搜索下拉框定制组件实现,在此记录. 一.效果 二.组件代码 dropdown.vue <template> <div class="vue-dropdown default-theme" v-show-extend="show"> <div class="search-module clearfix" v-show="length">

Vue2.x通用条件搜索组件的封装及应用详解

本文实例为大家分享了Vue2.x通用条件搜索组件的封装及应用,供大家参考,具体内容如下 效果   组件源码 <template> <div class="search"> <el-select v-model="type" @change="changeType" class="select"> <el-option v-for="item in selectItems&qu

vue2.0多条件搜索组件使用详解

本文为大家分享了vue2.0多条件搜索组件的实现方法,供大家参考,具体内容如下 搜索条件为死数据,通过select下拉,选取多个条件:同时可点击加号增加搜索条件,点击减号减少搜索条件: templete <template> <div class="retrievalmian"> <div class="retrievaltitle"> <a class="btn-default tabbtn" @cli

vue组件实现可搜索下拉框扩展

本文实例为大家分享了vue组件实现可搜索下拉框的具体代码,供大家参考,具体内容如下 一.效果 二.代码 dropdown-ext.vue <template> <div class="vue-dropdown-ext" :class="themestyle" v-show-extend="show"> <div class="search-module clearfix" v-show="

vue组件实践之可搜索下拉框功能

之前也写过这个小组件,最近遇到select下加搜索的功能,所以稍微完善一下. 效果图: 子组件 DROPDOWN.VUE <template> <div class="vue-dropdown default-theme"> <div class="cur-name" :class="isShow ? 'show':''" @click="isShow =! isShow">{{itemli

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

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

Vue使用枚举类型实现HTML下拉框步骤详解

下拉框包含option中的Value和用来显示的选项, 一般后台都是使用的Value值,而不是显示在前台的选项 第一步: 编写下拉框需要的枚举类型 StatusEnum.java public enum StatusEnum { RED, YELLOW, GREEN } 第二步: 编写用来存放下拉框中对应的option中的Value和显示的选项 StatusDTO.java public class StatusDTO { private String code; private String

vue 不使用select实现下拉框功能(推荐)

html部分:v-for循环出的结构 <div > <p @click="clickSize (item, index)">{{item.name}}</p> <transition name="opacityLeave"> <div class="condition-list" v-show="isShowSize && index == i"> &

jQuery实现的仿百度,仿谷歌搜索下拉框效果示例

本文实例讲述了jQuery实现的仿百度,仿谷歌搜索下拉框效果.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <html> <head> <title>

vue实现的下拉框功能示例

本文实例讲述了vue实现的下拉框功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net vue下拉框</title> <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js

微信小程序下拉框功能的实例代码

微信小程序组件里没有下拉框,正好要用到,记下来以后参考 wxml代码 <view class='top'> <view class='top-text'> 选择接收班级</view> <!-- 下拉框 --> <view class='top-selected' bindtap='bindShowMsg'> <text>{{grade_name}}</text> <image src='/images/icon/do

jQuery实现下拉框功能实例代码

说一百句,不如我给大家贴张效果图,效果图请看下面: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { m