Jquery autocomplete submits form before autocompleting the input

Question

this is my code ... The problem is that when i click on autocomplete suggestion it submits the from with only the information i've written to input and not the selected autocomleted word. I guess it's because the form gets submitted faster then the input gets autocompleted. But how do i solve it?

    <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();
                }
            });
        });

Here is the selector.php ... I dont know if you need it but still->

<?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);

Perhaps you'd want to set `$("#search").val(ui.item.value);` before you submit? — Snowmonkey, Dec 28 '17 at 21:13
[Here's your answer](https://stackoverflow.com/questions/2198539/jquery-autocomplete-submit-form-on-selection) on other post in StackOverflow. — Lucas Accastello, Dec 28 '17 at 21:16

score 3 · Accepted Answer · answered Dec 28 '17 at 21:14

The problem is the select event seems to be designed as more of a pre-processing event. You can implement your own custom selection logic and / or cancel the default logic by returning false from the method. You can also make sure the input is populated before submitting the form.

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

score 1 · Answer 2 · answered Dec 28 '17 at 21:18

I'd posted this as a comment, but I think it really deserves to be its own answer. This is actually an EASY gotcha to fall into.

While Muhammad is right that the select function is a 'pre-processor', by specifying one you remove the default selection behavior (i.e., actually populating the selected input's field). If you define your own select handler, make sure you populate that field before you submit the form, or do some sort of prototype.apply() thing.

Jquery autocomplete submits form before autocompleting the input

2 Answers2