码迷,mamicode.com
首页 > 移动开发 > 详细

移动端 input输入实时监听查询数据渲染

时间:2019-11-19 18:45:22      阅读:219      评论:0      收藏:0      [点我收藏+]

标签:压力   detail   end   out   href   blog   idt   inf   ima   

目前有一个需求,用户每输入内容就查找相应的 

效果图

技术图片

 

 

遇到的问题

1:每输入一个字母就进行查找,后台压力太大,重复渲染

解决:加入setTimeout   确保输入一定内容后在进行查询渲染 ,注意清除延迟 

  var time;
   
    $(‘#bname‘).keyup(function () {
        time=setTimeout(function () {
            $.ajax({
                url: "/sign",
                type: "post",
                data: {bname: $("#bname").val()},
                beforeSend:function(){
                    clearTimeout(time)
                },
                complete: function () {

                },

                success: function (data) {

                }
            })
        },1000)
    })

2:在安卓中,这个写法没问题,在ios中 自带键盘输入中文,选择之后不会掉keyup方法 导致无法进行查找的问题(字母没问题)

解决:换成input 方法,进行监听 解决

$(‘#bname‘).on(‘input‘,function () {
        time=setTimeout(function () {
            $.ajax({
                url: "/sign",
                type: "post",
                data: {bname: $("#bname").val()},
                beforeSend:function(){
                    clearTimeout(time)
                },
                complete: function () {

                },

                success: function (data) {

                }
            })
        },1000)
    })

  

另一篇蚊帐有提到 相关内容 但是我尝试了一下 并不能解决 也放在这里 希望大家指出问题

https://blog.csdn.net/u011410254/article/details/82492789

移动端 input输入实时监听查询数据渲染

标签:压力   detail   end   out   href   blog   idt   inf   ima   

原文地址:https://www.cnblogs.com/GoTing/p/11891329.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!