Question

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

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

此php代码位于另一个文件中，以便从数据库中选择正确的值，但我认为解决该问题没有任何帮助。


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

我认为问题在于：

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

及其等同于#card_name的附加事件附加到任何li；只要单击li，这两个事件处理程序都将运行。

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

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

和#card_name的等效项将起作用。

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

1 个答案: