时间戳

首页 > 解决方案 > jQuery .change() 事件在具有自动完成功能的移动设备上不起作用

jquery - jQuery .change() 事件在具有自动完成功能的移动设备上不起作用

问题描述

我在文本框中使用 ui-autocomplete。一旦他们选择了一个自动完成下拉菜单并离开该文本框，它就会自动填充所有其他文本字段。所有这些都适用于个人电脑，但不适用于移动网页。我发现它与 ui-autocomplete 插件有关，它不会让移动浏览器接收到更改事件。

我查看了类似的案例，但似乎无法解决问题。我对 jQuery 很陌生

如果我取消注释最后一个插件，将选择更改事件，但自动填充将不起作用。

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">

文本框：

<tr><td>Part Name: </td><td><input type="text" name="PartNum" class="auto" id="pn" style="width:250px" required></td></tr>

    <script type="text/javascript">
        $(function() {
                $(".auto").autocomplete({
                    source: "autocomplete.php",
                minLength: 1
            });
        });
    </script>

更改事件

$('#pn').change(function(e) {
        e.preventDefault();
        myrequest();
    });

同样，这在电脑上可以正常工作，但不能在手机上工作。任何帮助表示赞赏。

标签： jqueryjquery-ui-autocomplete

解决方案

JQueryUI 自动完成有一个 select() 事件，当一个项目被选中时触发。最好使用它，因为 .change() 首先在用户专注于元素时起作用，其次当在输入字段上创建自动完成时，字段本身被替换（并被隐藏）。

这是您将如何实现 select() 事件：

$(function() {
   $(".auto").autocomplete({
      source: "autocomplete.php",
      minLength: 1,
      select: function( event, ui ) { myrequest(); }
   });
});

您不需要在此处使用 preventdefault。您可以在函数大括号中添加更多代码。

推荐阅读