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

时间:2021-10-02 05:21:22

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

效果图

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

 

 

遇到的问题

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