PHP JavaScript MYSQL: Two search filed with autocompletement

Question

In my website the user need to put in the apposite field the Name and the Set of a card. Foor doing this, i've implemented a search field for the 2 inpunt field that can help the user, linked to the Mysql database. The problem is when the user select a value: This value appears in both the serch filed like in the photo that I provide below.

The user select the name:

Result on both the search field

This codes in php/Javascript is for the input fields.

<div class="col-4">
                                <div class="form-group">
                                    <!-- Doveva esserci name="search"-->
                                    <input class="form-control" id="set_name" type="text" name="set_name" placeholder="Exact Set Name in English">

                                    <div class="list-group" id="show-list">
                                        <!-- Here autocomplete list will be display -->
                                    </div>
                                        <!-- country = set_name, countryList = show-list  -->
                                </div>
                            </div>

                            <!-- script per auto completamento   query = searchText-->
                            <script>
                                $(document).ready( function(){
                                    $("#set_name").keyup(function(){
                                        var searchText = $(this).val();
                                        if(searchText != '')
                                        {
                                            $.ajax({
                                                url:'php/action.php',
                                                method:'POST',
                                                data:{query_set:searchText},
                                                success:function(data)
                                                {
                                                    $("#show-list").fadeIn();
                                                    $("#show-list").html(data);
                                                }
                                            });
                                        }
                                        else{
                                            $("#show-list").fadeOut();
                                            $("#show-list").html('');
                                        }
                                    });
                                    $(document).on('click','li',function(){
                                        $("#set_name").val($(this).text());
                                        $("#show-list").fadeOut();
                                    });

                                });
                            </script>

                            <!--   <a href='#' class='list-group-item list-group-item-action'>   -->

                            <div class="col-4">
                            <div class="form-group">

                                <input class="form-control" type="text" id="card_name" name="card_name"  placeholder="Exact Card Name in English">
                                
                                <div class="list-group" id="show-list-card">
                                    <!-- Here autocomplete list will be display -->
                                </div>

                            </div>
                            </div>

                            <!-- script per auto completamento   query = searchText-->
                            <script>
                                $(document).ready( function(){
                                    $("#card_name").keyup(function(){
                                        var searchText = $(this).val();
                                        if(searchText != '')
                                        {
                                            $.ajax({
                                                url:'php/action.php',
                                                method:'POST',
                                                data:{query_card:searchText},
                                                success:function(data)
                                                {
                                                    $("#show-list-card").fadeIn();
                                                    $("#show-list-card").html(data);
                                                }
                                            });
                                        }
                                        else{
                                            $("#show-list-card").fadeOut();
                                            $("#show-list-card").html('');
                                        }
                                    });
                                    $(document).on('click','li',function(){
                                        $("#card_name").val($(this).text());
                                        $("#show-list-card").fadeOut();
                                    });

                                });
                            </script>

This php code instead is in another file, to select the right value from the database, but i think it is irrilevant to solve the problem.

<?php

require "dbh.php";

if(isset($_POST['query_set'])){

    $input_text = $_POST['query_set'];
    
    $sql = "SELECT DISTINCT Set_name FROM card WHERE Set_name LIKE '%$input_text%' ";

    $result = $connessione->query($sql);

    $output = '<ul class="list-unstyled"';

    if($result->num_rows > 0){

        while($row = $result->fetch_assoc()){
    
            $output .=   '<a><li>' . $row['Set_name'] .'</li></a>';
            
        }
    }
    else{
        $output .= '<li>Set Not Found</li>';
    }

    $output .= '</ul>';
    echo $output;

}

if(isset($_POST['query_card'])){

    $input_text = $_POST['query_card'];
    
    $sql = "SELECT DISTINCT Card_name FROM card WHERE Card_name LIKE '%$input_text%' ";

    $result = $connessione->query($sql);

    $output = '<ul class="list-unstyled"';

    if($result->num_rows > 0){

        while($row = $result->fetch_assoc()){
    
            $output .=   '<a><li>' . $row['Card_name'] .'</li></a>';
            
        }
    }
    else{
        $output .= '<li>Card Not Found</li>';
    }

    $output .= '</ul>';
    echo $output;

}

Answer 1

I think that the problem is that:

$(document).on('click','li',function(){
    $("#set_name").val($(this).text());
    $("#show-list").fadeOut();
});

and its equivalent for #card_name attach events to any li; both of these event handlers will run any time an li is clicked.

I've not used jQuery in a while, but perhaps:

$("#show-list").on('click','li',function(){
    $("#set_name").val($(this).text());
    $("#show-list").fadeOut();
});

and the equivalent for #card_name would work.