Ajax、PHP Live search 和 show more code 分开工作，但不能一起工作答案

【问题标题】：Ajax, PHP Live search & show more code works separately but not togetherAjax、PHP Live search 和 show more code 分开工作，但不能一起工作
【发布时间】：2014-02-06 11:07:10
【问题描述】：

我有一个 Ajax PHP Show More 功能，例如 youtube 和实时搜索脚本，但我无法让它们一起工作。例如，我的实时搜索有效，但显示更多功能在搜索结果中不起作用，当我使用更多节目时，实时搜索不起作用。

他们似乎并没有互相纠缠。谁能帮我吗？我是这个网站的新手，所以我会尽力展示我的代码并解释它。

索引.PHP

<?php 
include_once("connect.php");
$sql = "SELECT COUNT(*) FROM database";
$query = mysqli_query($connect,$sql) or die (mysqli_error());
$item_per_page = 3; 
$total_rows = mysqli_fetch_array($query);
$pages = ceil($total_rows[0]/$item_per_page);
?>    
<!DOCTYPE html>
<head>
<script type="text/javascript">
// Show More Scripted
$(document).ready(function() {
var track_click = 0; 
var total_pages = <?php echo $pages; ?>;
$('#news-table-wrap').load("showmore_search.php", {'page':track_click}, function() {track_click++;});
$(".load_more").click(function (e){ 
$(this).hide(); 
$('.animation_image').show();
if(track_click <= total_pages){
$.post(showmore_search.php',{'page': track_click}, function(data) {
$(".load_more").show();
$("#news-table-wrap").append(data);
$("html, body").animate({scrollTop: $("#load_more_button").offset().top}, 500);
$('.animation_image').hide();
track_click++;
}).fail(function(xhr, ajaxOptions, thrownError){
    alert(thrownError);
$(".load_more").show();
$('.animation_image').hide();
});
if(track_click >= total_pages-1){
$(".load_more").attr("disabled", "disabled");
}
}
});
});
// Live Search Script
function searchNews(value) {
$.post("showmore_search.php", {newsResult:value}, function(data){ 
    $("#news-table-wrap").html(data);
});
}
</script>
</head>
<body>
<input type="text" name="search" id="search" class="search-box" onKeyUp="searchNews(this.value)" placeholder="Search News">
<table id="news-table-wrap" class="news-table-wrap" cellpadding="0" cellspacing="0">
</table>
<div align="center">
<div class="load_more" id="load_more_button">Show More</div>
<div class="animation_image" style="display:none;"><img src="/files/ajax-loader.gif"></div>
</div>
</body>
</html>

SHOWMORE_SEARCH.php

<?php 
include_once("connect.php");
$newsResult = $_POST['newsResult'];
$item_per_page = 3; 
$page_number = $_POST["page"];
$position = ($page_number * $item_per_page);
$sql = "SELECT * FROM database WHERE headline LIKE '%$newsResult%' OR post LIKE '%$newsResult%' ORDER BY date DESC LIMIT $position, $item_per_page";
$query = mysqli_query($connect,$sql) or die (mysqli_error());
while ($row = mysqli_fetch_array($query)){
    $headline = $row['headline'];
    $author = $row['author'];
    $date = $row['date'];
    $post = $row['post'];
    $name = $row['name'];
    echo "<tr class='news-preview-wrap'>";
    echo "<td><div class='news-preview-content'><div class='news-preview-headline'><a href='news_post?name=".$name."'>".$headline."</a></div>
          <div class='news-preview-date'>Written by ".$author." on ".$date."</div>
          <div class='news-preview-post'>".$post."</div></div>
          <div class='news-more'><a href='news_post?name=".$name."'>Read More</a></div></td>";
    echo "</tr>";
} else {
    echo "<div class='search-error'>No search results were found...</div>";
}   
?>

【问题讨论】：

标签： javascript php ajax search pagination

【解决方案1】：

这是您可以使用 Ajax、PHP 和 JQuery 执行的操作。希望这对您有所帮助或开始。

在此处查看现场演示和源代码。

http://purpledesign.in/blog/to-create-a-live-search-like-google/

创建一个搜索框，可以是这样的输入框。

<input type="text" id="search" autocomplete="off">

现在我们需要聆听用户在文本区域输入的任何内容。为此，我们将使用 jquery live() 和 keyup 事件。在每个 keyup 上，我们都有一个 jquery 函数“search”，它将运行一个 php 脚本。

假设我们有这样的 html。我们有一个输入字段和一个列表来显示结果。

 <div class="icon"></div>
 <input type="text" id="search" autocomplete="off">
 <ul id="results"></ul>

我们有一个 Jquery 脚本，它将监听输入字段上的 keyup 事件，如果它不为空，它将调用 search() 函数。 search() 函数将运行 php 脚本并使用 AJAX 在同一页面上显示结果。

这里是 JQuery。

  $(document).ready(function() {  

        // Icon Click Focus
        $('div.icon').click(function(){
            $('input#search').focus();
        });

        //Listen for the event
            $("input#search").live("keyup", function(e) {
            // Set Timeout
            clearTimeout($.data(this, 'timer'));

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

            // Do Search
            if (search_string == '') {
                $("ul#results").fadeOut();
                $('h4#results-text').fadeOut();
            }else{
                $("ul#results").fadeIn();
                $('h4#results-text').fadeIn();
                $(this).data('timer', setTimeout(search, 100));
            };
        });


        // Live Search
        // On Search Submit and Get Results
        function search() {
            var query_value = $('input#search').val();
            $('b#search-string').html(query_value);
            if(query_value !== ''){
                $.ajax({
                    type: "POST",
                    url: "search_st.php",
                    data: { query: query_value },
                    cache: false,
                    success: function(html){
                        $("ul#results").html(html);

                    }
                });
            }return false;    
        }



    })

;

在 php 中，对 mysql 数据库进行查询。 php 将返回将使用 AJAX 放入 html 的结果。这里将结果放入一个 html 列表中。

假设有一个虚拟数据库，其中包含两个表动物和鸟，其中两个相似的列名为“type”和“desc”。

//search.php

// Credentials
$dbhost = "localhost";
$dbname = "live";
$dbuser = "root";
$dbpass = "";

//  Connection
global $tutorial_db;

$tutorial_db = new mysqli();
$tutorial_db->connect($dbhost, $dbuser, $dbpass, $dbname);
$tutorial_db->set_charset("utf8");

//  Check Connection
if ($tutorial_db->connect_errno) {
    printf("Connect failed: %s\n", $tutorial_db->connect_error);
    exit();
}
    $html = '';
    $html .= '<li class="result">';
    $html .= '<a target="_blank" href="urlString">';
    $html .= '<h3>nameString</h3>';
    $html .= '<h4>functionString</h4>';
    $html .= '</a>';
    $html .= '</li>';
     $search_string = preg_replace("/[^A-Za-z0-9]/", " ", $_POST['query']);
    $search_string = $tutorial_db->real_escape_string($search_string);

// Check Length More Than One Character
if (strlen($search_string) >= 1 && $search_string !== ' ') {
    // Build Query
    $query = "SELECT *
     FROM animals
     WHERE type LIKE '%".$search_string."%'
     UNION ALL SELECT *
     FROM birf
     WHERE type LIKE '%".$search_string."%'"
     ;
    $result = $tutorial_db->query($query);
        while($results = $result->fetch_array()) {
            $result_array[] = $results;
        }

        // Check If We Have Results
        if (isset($result_array)) {
            foreach ($result_array as $result) {

                // Format Output Strings And Hightlight Matches
                $display_function = preg_replace("/".$search_string."/i", "<b class='highlight'>".$search_string."</b>", $result['desc']);
                $display_name = preg_replace("/".$search_string."/i", "<b class='highlight'>".$search_string."</b>", $result['type']);
            $display_url = 'https://www.google.com/search?q='.urlencode($result['type']).'&ie=utf-8&oe=utf-8';

                // Insert Name
                $output = str_replace('nameString', $display_name, $html);

                // Insert Function
                $output = str_replace('functionString', $display_function, $output);

                // Insert URL
                $output = str_replace('urlString', $display_url, $output);



                // Output
                echo($output);
            }
        }else{

            // Format No Results Output
            $output = str_replace('urlString', 'javascript:void(0);', $html);
            $output = str_replace('nameString', '<b>No Results Found.</b>', $output);
            $output = str_replace('functionString', 'Sorry :(', $output);

            // Output
            echo($output);
        }
    }

【讨论】：