使用php和mysql的ajax搜索功能

Question

I'm using an ajax call to query my mysql db to search for a list of users.

here is the html;

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

Here is my function.

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

here is the query:

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

This works perfectly. But if i want to use the same function, in the same form, my other input fields get updated as well(Even tho the id is different and the query is in a different php file altogether. eg.

this HTML;

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

This function;

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

with this query;

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

This updates both input fields with the same data. Any ideas why my query is not being passed to one specific input, but getting populated across my form?

Answer 1

On a closer look, both event handlers have something in common:

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

Eg both are attached to the same element ( document ). Also, in both situations, each click event is triggered on an element of type li . So, the two separated code snippets could, theoretical, be joined together into:

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

This "arrangement" emphasizes the problem better. Eg that all inputs are beeing updated at the same time.

In order to avoid this behaviour you can attach each event handler to the corresponding "parent" element, not anymore to the document . The final code would then look something like this:

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