ajax搜索函数

tktrz96b 于 2021-06-24 发布在 Mysql

关注(0)|答案(1)|浏览(318)

我使用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;
}

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

mysql php ajax JavaScript

来源：https://stackoverflow.com/questions/51014466/ajax-search-function-using-php-and-mysql

1条答案

按热度按时间

gab6jxml1#

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

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

e、 g.两者都连接到同一元件上( 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>

这种“安排”更强调问题。e、 g.所有输入同时更新。
为了避免这种行为，您可以将每个事件处理程序附加到相应的“父”元素，而不再附加到 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>

赞(0）回复(0）举报 2021-06-24

我来回答

ajax搜索函数

1条答案

相关问题

热门标签

最新问答