PHP JavaScript MYSQL：具有自动完成功能的两个搜索字段

在我的网站中，用户需要在适当的字段中输入卡的名称和设置。为此，我为2输入字段实现了一个搜索字段，该字段可以帮助用户，链接到Mysql数据库。问题是当用户选择一个值时：这个值出现在两个serch字段中，就像我在下面提供的照片中一样

php/Javascript中的这些代码用于输入字段

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

$（文档）.ready（函数（）{
$（“#设置名称”）.keyup（函数（）{
var searchText=$（this.val（）；
如果（搜索文本！=''）
{
$.ajax({
url:'php/action.php'，
方法：'POST'，
数据：{query\u set:searchText}，
成功：功能（数据）
{
$（“#显示列表”）.fadeIn（）；
$（“#显示列表”）.html（数据）；
}
});
}
否则{
$（“#显示列表”）.fadeOut（）；
$（“#显示列表”）.html（“”）；
}
});
$（文档）。在（'click'，'li'，函数（）上{
$（“#set_name”）.val（$（this.text（））；
$（“#显示列表”）.fadeOut（）；
});
});
我认为问题在于：

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

和它的等价物#card#u name将事件附加到任何li；无论何时单击li，这两个事件处理程序都将运行

我已经有一段时间没有使用jQuery了，但是可能：

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

与#card_name等效的方法也可以使用。
请注意：您的SQL查询已被广泛用于SQL注入！另外，您尝试检查此错误从何处开始？通常，这要么是Javascript问题（例如浏览器中的某些内容处理不正确，例如请求已使用不正确的值发送），要么是PHP问题（所有值都正确发送，但未正确处理）
$("#show-list").on('click','li',function(){
    $("#set_name").val($(this).text());
    $("#show-list").fadeOut();
});