首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使用php和mysql的ajax搜索功能

使用php和mysql的ajax搜索功能
EN

Stack Overflow用户
提问于 2018-06-25 06:26:48
回答 1查看 88关注 0票数 1

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

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

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-06-25 07:37:46

仔细观察,这两个事件处理程序都有一些共同之处:

<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>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51014466

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档