使用PHP和ajax实时搜索表

时间:2016-06-30 17:35:27

标签: javascript php mysql ajax

我正在创建一个从数据库中提取的html表,并使用实时搜索功能显示条目。就我所知,一切似乎都正确到位,但表格根本没有填充,搜索也不起作用。

这是搜索功能php页面:

<?php

    require_once '../../php/db.php';

    // Output HTML formats
    $html = '<tr>';
    $html .= '<td class="small">dNameString</td>';
    $html .= '<td class="small">phoneString</td>';
    $html .= '<td class="small">companyString</td>';
    $html .= '<td class="small">billingString</td>';
    $html .= '</tr>';

    //Get the search
    $search_string = preg_replace("/[^A-Za-z0-9]/", " ", $_POST['query']);
    $search_string = $conn->real_escape_string($search_string);

    // Check if length is more than 1 character
    if (strlen($search_string) >= 1 && $search_string !== ' ') {

         //Insert Time Stamp for complete searches
        $time = "UPDATE query_data SET timestamp=now() WHERE name='" .$search_string. "'";

        //Count how many times a query occurs 
        $query_count = "UPDATE query_data SET querycount = querycount +1 WHERE name='" .$search_string. "'";

        //Query
        $query = 'SELECT * FROM customers WHERE clientDisplayName LIKE "%'.$search_string.'%"';

        //Timestamp entry of search for later display
        $time_entry = $conn->query($time);

        //Count how many times a query occurs
        $query_count = $conn->query($query_count);

        // Do the search
        $result = $conn->query($query);
        while($results = $result->fetch_array()) {
            $result_array[] = $results;
        }

         // Check for results
        if (isset($result_array)) {
            foreach ($result_array as $result) {
                // Output strings and highlight the matches
                $d_name = preg_replace("/".$search_string."/i", "<b>".$search_string."</b>", $result['clientDisplayName']);
                $d_phone = $result['clientPhNumber'];
                $d_comp = $result['clientCompanyName'];
                $d_street = $result['clientBillingStreet'];

                // Replace the items into above HTML
                $o = str_replace('dNameString', $d_name, $html);
                $o = str_replace('phoneString', $d_phone, $o);
                $o = str_replace('companyString', $d_comp, $o);
                $o = str_replace('billingString', $d_street, $o);

                // Output it
                echo($o);
            }
        } else {
             // Replace for no results
             $o = str_replace('dNameString', '<span class="label label-danger">No Names Found</span>', $html);
             $o = str_replace('phoneString', '', $o);
             $o = str_replace('companyString', '', $o);
             $o = str_replace('billingString', '', $o);

             // Output
             echo($o);
        }

    }

?>

这是我的javascript代码:

$(document).ready(function() {  

$(".tablesearch").hide();
// Search
function search() {
    var query_value = $('input#clientDisplayName').val();
    if(query_value !== ''){
        $.ajax({
            type: "POST",
            url: "../php/search.php",
            data: { query: query_value },
            cache: false,
            success: function(html){
                $("table#resultTable tbody").html(html);
            }
        });
    }return false;    
}

$("input#clientDisplayName").live("keyup", function(e) {
    // Set Timeout
    clearTimeout($.data(this, 'timer'));

    // Set Search String
    var search_string = $(this).val();

    // Do Search
    if (search_string == '') {
        $(".tablesearch").fadeOut(300);
    }else{
        $(".tablesearch").fadeIn(300);
        $(this).data('timer', setTimeout(search, 100));
    };
});

});

这是html中的实际表格:

        <div class="row">
            <div class="col-xs-12 col-sm-4 col-md-3 col-lg-3">
            <p>Type a name to begin searching</p>
                    <form class="form-horizontal" name="search" role="form" method="POST" onkeypress="return event.keyCode != 13;">
                        <div class="input-group col-sm-11">
                            <input id="name" name="name" type="text" class="form-control" placeholder="Search by name..." autocomplete="off"/>
                            <span class="input-group-btn">
                                <button type="button" class="btn btn-default btnSearch">
                                    <span class="glyphicon glyphicon-search"> </span>
                                </button> </span>
                        </div>
                    </form>
            </div>

        </div>

        <div class="row mt">
            <div class="col-lg-12">
                <div class="content-panel tablesearch">

                    <section id="unseen">
                        <table id="resultTable" class="table table-bordered table-hover table-condensed">
                            <thead>
                                <tr>

                                    <th class="small">Name</th>
                                    <th class="small">Phone</th>
                                    <th class="small">Company</th>
                                    <th class="small">Address</th>

                                </tr>
                            </thead>

                            <tbody></tbody>
                        </table>
                    </section>

                </div><!-- /content-panel -->
            </div><!-- /col-lg-4 -->
        </div><!-- /row -->


        <div class="row mt">
            <div class="col-lg-12">
                <h3>Top Searches</h3>
                <p>These results are ranked by popularity in the query_data table. Each time the complete name is entered in the search, a +1 is registered and incremented.</p>
                <div class="content-panel">

                    <section id="unseen">
                        <table id="resultTable-topsearch" class="table table-bordered table-hover table-condensed">
                            <thead>
                                <tr>

                                    <th class="small">Name</th>
                                    <th class="small">Company</th>
                                    <th class="small">Zip</th>
                                    <th class="small">City</th>

                                </tr>
                            </thead>

                            <tbody><?php include 'php/top_search.php' ?></tbody>
                        </table>
                    </section>

                </div><!-- /content-panel -->
            </div><!-- /col-lg-4 -->
        </div><!-- /row -->

我一直在撕扯头发,有人可以帮忙吗?

0 个答案:

没有答案