input输入框的input事件

input输入框的input事件首先是一个坑,在IE和360浏览器中页面刷新会执行一遍input事件,在其他浏览器就没有,所以会有很大问题,导致做的自动补全列表直接显示,刷新页面也不能隐藏。<inputtype=”text”class=”comHeaderBanSearchSearchfl”placeholder=”请输入关键字查询”v-model=”inputVal”@keyup.enter=”sear…

大家好,又见面了,我是你们的朋友全栈君。

首先是一个坑,在IE和360浏览器中页面刷新会执行一遍input事件,在其他浏览器就没有,所以会有很大问题,导致做的自动补全列表直接显示,刷新页面也不能隐藏。

<input type="text" class="comHeaderBanSearchSearch fl" placeholder="请输入关键字查询" v-model="inputVal" @keyup.enter="searchBtn">

//在data中 我直接把inputVal的值拿到路由的值 这样页面一进来就不用走watch了 这样就避免了在created中赋值 是inputVal变化从而进行监听 还会走自动补全的函数了
data(){
return {
inputVal:this.$route.query.searchWord?this.$route.query.searchWord:'',
}
}

//监听 watch中
watch:{
inputVal(newVal,oldVal){
        this.inputChange();
      },
},
methods:{
      /*自动补全数据 methods*/
      inputChange() {
        if(this.inputVal!=''){
          getsuggestAPI({
            term: this.inputVal,
            num: 8
          }).then(res => {
            if (res.data.status) {
              this.suggest = res.data.data;
              this.issuggest=true;
              this.$store.commit('suggest',this.issuggest)
            }
          })
        }else{
          this.suggest=[];
          this.issuggest=false;
          this.$store.commit('suggest',this.issuggest)
        }


      },
},



 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/133646.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • python模块list 转json字符串_python 列表 字典转json[通俗易懂]

    python模块list 转json字符串_python 列表 字典转json[通俗易懂]一、Dictionary转为JSON将dict转为JSON,这里利用包jsonimportjsonaItem={}aItem[“id”]=”2203″aItem[“title”]=”title”aItem[“subTitle”]=”subtitle”bItem={}bItem[“id”]=”2842″bItem[“title”]=”b标题”bItem[“subTi…

    2022年10月18日
    2
  • 初次尝试使用VisualSFM记录

    初次尝试使用VisualSFM记录  对于SFM一直觉得高大上又神秘,一年前粗略的了解过一下,今年有时间尝试深入了解SFM,对于初学者来说,VisualSFM真的时非常好的感受SFM的免费软件,于是通过其他博客的指导(没去看官方的英文版,容易犯困),做了一个3D模型出来,感觉还挺好玩,记录一下。  实际上,VisualSFM只做了一部分工作,优化是用MeshLab做的,所以分两个环节:   1.VisualSF…

    2022年6月20日
    24
  • VS2005卸载问题「建议收藏」

    VS2005卸载问题「建议收藏」由于本人的VS2005是中英文结合的(先安装了中文版的,卸载不彻底后,又安装了英文版,造成了中英文结合的),所以在开发的时候,在遇到一些细节的时候,总是会存在编译错误,就是由于这种结合体造成的,为了净化自己的开发环境,今天决定彻底的删除这个结合体,该为英文版。重装了好几次终于成功。以下为成功步骤:先在“控制面板”的“添加删除程序中”删除所有相关…

    2022年9月24日
    2
  • 阿里云大数据存储密集型实例d2s云服务器配置性能详解

    阿里云大数据存储密集型实例d2s云服务器配置性能详解阿里云大数据存储密集型实例d2s云服务器配置性能CPU、内存、适用场景、大数据存储密集型d2s实例规格族和优惠报价信息,InstanceTypes分享大数据存储密集型d2s实例详解:大数据存储密集型d2s实例规格族特性I/O优化实例支持ESSD云盘、SSD云盘和高效云盘实例配备大容量、高吞吐SATAHDD本地盘,辅以最大35Gbit/s实例间网络带宽支持在线更换坏盘,支持热插拔坏盘,避免导致实例停机处理器:2.5GHz主频的Intel®Xeon®Platinum8163(Sky.

    2022年5月2日
    58
  • 微信小程序获取openid返回40029的一种错误情况

    微信小程序获取openid返回40029的一种错误情况微信小程序返回40029的情况原因有很多,遇到后大概总结了几个已知的1.小程序里传到后台的code被微信的调用接口使用了两次(只能使用一次)2.appid、AppSecret的值不对(这个自己复制感觉一般不会错)3.自己遇到的最难受的原因:创建项目的appid跟你请求url里的appid、AppSecret不是同一组起因:刚开始学习的时候,自己注册了一个小程序账号,第一个项目用的这…

    2022年6月4日
    47
  • 河北2021普通高考理科成绩查询,2019年河北高考一分一段表 文科理科成绩排名查询…[通俗易懂]

    河北2021普通高考理科成绩查询,2019年河北高考一分一段表 文科理科成绩排名查询…[通俗易懂]2019年河北省普通高校招生文理科考生成绩统计表最新!2019年河北省普通高校招生文理科考生一分一档统计表公布!河北考生和家长可登录河北省教育考试院官方网站(http://www.hebeea.edu.cn)查询《2019年河北省普通高校招生各类考生成绩统计表》。2019年河北省普通高校招生文理科一分一档统计表2019河北高考一分一档统计表公布2019河北高考一分一档统计表公布22019河北高考一…

    2022年7月14日
    13

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号