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

Posted goting

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端 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

以上是关于移动端 input输入实时监听查询数据渲染的主要内容,如果未能解决你的问题,请参考以下文章

实时监听移动端输入框的变化

移动端用js与jquery实时监听输入框值的改动

jquery移动端键盘keyup失效

jquery 实时监听输入框值变化的完美方案

input输入框内容变化实时监听

自定义JQ事件,对input输入框内容进行实时监听-韩烨