在自动完成输入之前，Jquery自动完成提交表单

Posted 2021-05-02

这是我的代码...问题是，当我点击自动完成建议时，它只提交我写入输入的信息而不是选择的自动填充的单词。我想这是因为表单提交得更快，然后输入自动完成。但我该如何解决呢？

    <form id="searchForm" action="../chat/chat.php" method="POST">
        <input id="search" type="text" name="getter" value="" placeholder="Search for user">
    </form>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(function() {

            $("#search").autocomplete({
                source: "selector.php",
                minLength: 1,
                select: function(event, ui) { 
                    $("#searchForm").submit();
                }
            });
        });

这是selector.php ...我不知道你是否需要它但仍然 - >

<?php

include_once "../additional_code/dbh.inc.php";

$return_arr = array();

$searchTerm = $_GET["term"];

$sql = "SELECT user_uid FROM users WHERE user_uid LIKE '%" . $searchTerm . "%' ";

$result = mysqli_query($conn, $sql);

while($row = mysqli_fetch_assoc($result)) {
    $return_arr[] =  $row['user_uid'];
}
echo json_encode($return_arr);

答案

问题是选择事件似乎被设计为更多的预处理事件。您可以通过从方法返回false来实现自己的自定义选择逻辑和/或取消默认逻辑。您还可以确保在提交表单之前填充输入。

someInput.autocomplete({
    source: selector.php,
    select: function (event, ui) {
         $("#search").val(ui.item.value);
         $("#searchForm").submit();
    }
});

另一答案

我发布这个评论作为评论，但我认为它确实应该是它自己的答案。这实际上很容易陷入困境。

虽然穆罕默德是正确的，选择功能是一个'预处理器'，通过指定一个你删除默认选择行为（即，实际填充选定的输入的字段）。如果您定义自己的select处理程序，请确保在提交表单之前填充该字段，或者执行某种prototype.apply（）事务。