使用php和mysql的ajax搜索功能

Question

我正在使用 ajax 调用来查询我的 mysql 数据库以搜索用户列表。

这是html；

<input type="text" id="partnerName" name="partnerName" class="form-control" placeholder="Type to search partners....">
   <div id="partnerList" style="background-color:#beb6ac;"></div>

这是我的功能。

$(document).ready(function() {
            $('#busTradingName').keyup(function() {
                var query = $(this).val();
                if (query != '') {
                    $.ajax({
                        url: "search/empsearch.php",
                        method: "POST",
                        data: {
                            query: query
                        },
                        success: function(data) {
                            $('#empList').fadeIn();
                            $('#empList').html(data);
                        }
                    });
                }
            });

            $(document).on('click', 'li', function() {
                $('#busTradingName').val($(this).text());
                $('#empList').fadeOut();
            });
        });

这是查询：

    if(isset($_POST["query"])){
    $output = '';
    $query = "SELECT busTradingName FROM organisation WHERE busTradingName LIKE '%".$_POST["query"]."%'";
    $result = mysqli_query($connection, $query);
    $output = '<ul class="list-unstyled">';
    if(mysqli_num_rows($result) > 0)
    {
        while($row = mysqli_fetch_array($result))
        {
            $output .= '<li>'.$row["busTradingName"].'</li>';
        }
    }
    else
    {

        $output .= '<li>Not Found</li>';
    }
    $output .= '</ul>';
    echo $output;
}

这完美地工作。 但是，如果我想以相同的形式使用相同的功能，我的其他输入字段也会更新（即使 id 不同并且查询完全在不同的 php 文件中。例如。

这个 HTML;

<input type="text" name="busTradingName" id="busTradingName" placeholder="Last employer's trading name">
    <div id="empList"></div>

这个功能；

$(document).ready(function() {
            $('#partnerName').keyup(function() {
                var query = $(this).val();
                if (query != '') {
                    $.ajax({
                        url: "search/search.php",
                        method: "POST",
                        data: {
                            query: query
                        },
                        success: function(data) {
                            $('#partnerList').fadeIn();
                            $('#partnerList').html(data);
                        }
                    });
                }
            });

            $(document).on('click', 'li', function() {
                $('#partnerName').val($(this).text());
                $('#partnerList').fadeOut();
            });
        });

有了这个查询；

if(isset($_POST["query"])){
    $output = '';
    $query = "SELECT * FROM cards WHERE surname LIKE '%".$_POST["query"]."%'";
    $result = mysqli_query($connection, $query);
    $output = '<ul class="list-unstyled">';
    if(mysqli_num_rows($result) > 0)
    {
        while($row = mysqli_fetch_array($result))
        {
            $output .= '<li>'.$row["surname"].'</li>';
        }
    }
    else
    {

        $output .= '<li>Not Found</li>';
    }
    $output .= '</ul>';
    echo $output;
}

这会使用相同的数据更新两个输入字段。 任何想法为什么我的查询没有被传递到一个特定的输入，而是在我的表单中填充？

Answer 1

仔细观察，两个事件处理程序有一些共同点：

<script type="text/javascript">
    $(document).ready(function () {
        // ...ajax for #partnerName...

        $(document).on('click', 'li', function () {
            $('#partnerName').val($(this).text());
            $('#partnerList').fadeOut();
        });

        // ...ajax for #busTradingName...

        $(document).on('click', 'li', function () {
            $('#busTradingName').val($(this).text());
            $('#empList').fadeOut();
        });
    });
</script>

例如，两者都附加到同一个元素（ document ）。 此外，在这两种情况下，每个click事件都会在li类型的元素上触发。 因此，理论上，这两个分离的代码片段可以合并为：

<script type="text/javascript">
    $(document).ready(function () {
        // ...

        $(document).on('click', 'li', function () {
            $('#partnerName').val($(this).text());
            $('#partnerList').fadeOut();
            $('#busTradingName').val($(this).text());
            $('#empList').fadeOut();
        });
    });
</script>

这种“安排”更好地强调了这个问题。 例如，所有输入都同时更新。

为了避免这种行为，您可以将每个事件处理程序附加到相应的“父”元素，不再附加到document 。 最终的代码看起来像这样：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
        <meta charset="UTF-8" />
        <!-- The above 3 meta tags must come first in the head -->

        <title></title>

        <script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>

        <script type="text/javascript">
            $(document).ready(function () {
                //********************************************
                // Ops regarding the partner name.
                //********************************************

                $('#partnerName').keyup(function () {
                    var query = $(this).val();

                    if (query != '') {
                        $.ajax({
                            url: "search/search.php",
                            method: "POST",
                            data: {
                                query: query
                            },
                            success: function (data) {
                                $('#partnerList').fadeIn();
                                $('#partnerList').html(data);
                            }
                        });
                    }
                });

                $('#partnerList').on('click', 'li', function () {
                    $('#partnerName').val($(this).text());
                    $('#partnerList').fadeOut();
                });

                //********************************************
                // Ops regarding the trading name.
                //********************************************

                $('#busTradingName').keyup(function () {
                    var query = $(this).val();

                    if (query != '') {
                        $.ajax({
                            url: "search/empsearch.php",
                            method: "POST",
                            data: {
                                query: query
                            },
                            success: function (data) {
                                $('#empList').fadeIn();
                                $('#empList').html(data);
                            }
                        });
                    }
                });

                $('#empList').on('click', 'li', function () {
                    $('#busTradingName').val($(this).text());
                    $('#empList').fadeOut();
                });
            });
        </script>
    </head>
    <body>

        <!--<form method="post">-->
        <label>Partner name:</label>
        <input type="text" id="partnerName" name="partnerName" placeholder="Search for partners...">
        <div id="partnerList"></div>

        <br/>

        <label>Trading name:</label>
        <input type="text" id="busTradingName" name="busTradingName" placeholder="Search for last employer's trading name...">
        <div id="empList"></div>
        <!--</form>-->

    </body>
</html>