donglanying3855 2014-01-17 07:45
浏览 23

Ajax，PHP实时搜索和显示更多代码单独工作但不能一起工作

I have a Ajax PHP Show More feature like youtube and Live search scripts but I can't get them to work together. For example my live search works but then the show more feature doesn't work with it on the search results and when I use the show more then the live search doesn't work.

They don't seem to be messing with each other. Can anyone help me out? I am new to this website so I will try my best to show my code and explain it.

INDEX.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>";
}   
?>
  • 写回答

1条回答 默认 最新

  • duanbipu7601 2014-01-17 21:21
    关注

    Here is something you can do with Ajax, PHP and JQuery. Hope this helps or gives you a start.

    See live demo and source code here.

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

    Create a search box, may be an input field like this.

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

    Now we need listen to whatever the user types on the text area. For this we will use the jquery live() and the keyup event. On every keyup we have a jquery function “search” that will run a php script.

    Suppose we have the html like this. We have an input field and a list to display the results.

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

    We have a Jquery script that will listen to the keyup event on the input field and if it is not empty it will invoke the search() function. The search() function will run the php script and display the result on the same page using AJAX.

    Here is the 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;    
        }



    })

;

    In the php, shoot a query to the mysql database. The php will return the results that will be put into the html using AJAX. Here the result is put into a html list.

    Suppose there is a dummy database containing two tables animals and bird with two similar column names ‘type’ and ‘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
", $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);
        }
    }
    评论

报告相同问题？

  • ajax PHP 大文件上传
    2020-11-06 15:43
    通过查看和运行这个Demo，你可以更好地理解大文件上传的具体实现方式。 总之，Ajax和PHP结合使用可以实现无刷新的大文件上传，提升用户体验。需要注意的是，实际开发中还需考虑性能优化、安全性以及兼容性等问题。...
  • php+ajax实现文件切割上传功能示例
    2020-10-15 14:08
    这种技术组合不仅可以提高上传速度，还能给用户带来更流畅的上传体验。文中提供了一个详细的示例代码，用于说明如何实现上述功能。对于想进一步提升PHP程序设计能力的开发者来说，这是一个很好的学习资源。同时，...
  • 编写漂亮的代码 - 将后台程序与前端程序分开
    2020-10-30 11:59
    ### 编写漂亮的代码——将后台程序与前端程序分开 #### PHP前后端分离技术解析 在软件开发领域，特别是Web应用程序开发中，前后端分离已成为一种趋势和最佳实践。通过这种方式，开发者能够更加高效地组织代码，...
  • 前端之AJAX全接触
    2022-07-25 22:53
    Autumn_Hibiscus的博客 Ajax不是某种编程语言，是一种在无需重新加载整个网页的情况下能够更新部分网页的技术。...Ajax 全名 async javascript and XML(异步JavaScript和XML)，是前后台交互的能⼒，也就是我们客户端给服务端发
  • 前端开发框架：Ajax的基本入门和使用。
    2019-09-17 18:18
    技术承载梦想的博客 PHP代码执行方式： 在服务器端执行，然后返回给用户结果。如果直接使用浏览器打开，就会解析为文本。 意思是说，需要浏览器通过 http请求，才能够执行php页面。 这里只列举常用的PHP语法，更为详细的语法教程...
  • PHP+jQuery+Ajax期末作品.rar
    2020-12-23 18:38
    《PHP+jQuery+Ajax在Web开发中的应用》 在当今的Web开发领域，PHP、jQuery和Ajax这三种技术的结合，已经...通过理解这三者的原理和协同工作方式，开发者可以更好地掌握Web开发的前沿技术，创造出更多创新的在线应用。
  • AJAX和Promise
    2024-05-04 17:11
    weixin_45128368的博客 作用：它能够在不刷新整个页面的情况下，通过JS异步向服务器请求数据，异步加载和更新部分页面内容，说提高用户体验，动态加载数据，表单验证和提交等。Ajax一般使用XmlHttpRequest来实现异步通信，也可以使用Fetch ...
  • 第35天：Web开发-JS应用&原生代码&Ajax技术&JQuery库&Axios库&前端校验&安全结合
    2025-01-13 23:30
    独孤求败Ace的博客 ->php后端代码进行数据校验->返回特定的校验值->js代码接收返回包的校验值->进行比较判断->实现登录。使用JS可以使得网站运行高效、简洁，减轻服务器的运行负担，追求网站运行的速度与效率；①js过滤代码->由于嵌入...
  • 前端300道常见面试题，前端找工作必备
    2021-12-15 21:06
    编程ID的博客 前端面试题汇总 一、HTML 和 CSS 1、你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么? IE: trident 内核Firefox：gecko 内核Safari:webkit 内核 Opera:以前是 presto 内核，Opera 现已改用 Google Chrome...
  • PHP代码审计(全)
    2022-12-07 15:49
    助安社区的博客 PHP代码审计全流程，黑白盒测试，小技巧，实操案例
  • 没有解决我的问题, 去提问