javascript - Ajax 实时搜索不适用于触摸屏手机

标签 javascript jquery html css ajax

我已经在我的网站上实现了ajax实时搜索。它确实适用于所有浏览器,但当涉及到触摸屏时,它不会显示任何结果。我认为代码没有检测到触摸事件,但即使在我的几个浏览器上也是如此在网上搜索我不知道该怎么做。这是我的代码,任何帮助将不胜感激

        $(document).ready(function () {

        $("#search").keyup(function (e){

            var inp = String.fromCharCode(e.keyCode);

            if (/[a-zA-Z0-9-_ ]/.test(inp)) {

                $.ajax({

                    url: '/search.php',

                    type: 'POST',

                    data: "keyword=" + $(this).val(),

                    success: function (data) {

                        data = $.parseJSON(data);

                        if (data['response'] == true) {

                            $("#search_results").html(data['html']).show();

                        } else {

                            alert("Please try again.");

                        }

                    }

                });

            }

        });



        function hide_search_results(e) {

            var container = $("#search_results");

            if (!container.is(e.target) && container.has(e.target).length === 0) {

                window.displayBoxIndex = -1;

                container.hide();

            }

        }



        $(document).mouseup(function (e) {

            hide_search_results(e);

        });

    });

最佳答案

我相信您还需要 touchend 事件来使您的脚本支持触摸屏。

尝试使用 .on() 代替 .keyup() 的两个事件。

$('#search').on('touchend keyup', function(e) {
  ...
});

作为替代方案,您可以使用 input 事件而不是 touchend

关于javascript - Ajax 实时搜索不适用于触摸屏手机,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46171020/

相关文章:

javascript - 获得 parent 的第n个 child

javascript - 打破 JavaScript 中嵌套循环的最佳方法是什么?

javascript - 使用ajax时如何处理JQuery DataTable中的空值

html - 缩放 svg 图像以适合父级作为 css 背景

javascript - Angular 2加载动画卡住

javascript - 完成原始 document.title 上的脚本吗?

javascript - AngularJs 通过 rel 属性查找链接不起作用

javascript - 如何使用 AJAX 执行 Pug for 循环?

javascript - 使用 javascript 永久更改 html 值?

javascript - 如何用动画显示溢出的文字?(Javascript - HTML - CSS)