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

Posted 2020-11-22 goting

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

效果图

 

 

遇到的问题

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