CODEWITHSUNDEEP
javascriptjqueryformsinputautocomplete
Fast Arrows
Fast Arrows

Reputation: 329

Jquery autocomplete submits form before autocompleting the input

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

Upvotes: 0

Views: 464

Answers (2)

Snowmonkey
Snowmonkey

Reputation: 3761

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.

Upvotes: 1

Muhammad Omer Aslam
Muhammad Omer Aslam

Reputation: 23738

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

Upvotes: 3

Related Questions