使用 PHP MySQL 和 JQUERY 通过 Ajax 搜索框加载下 10 条记录答案

【问题标题】：Load the next 10 record via Ajax Search Box using PHP MySQL and JQUERY使用 PHP MySQL 和 JQUERY 通过 Ajax 搜索框加载下 10 条记录
【发布时间】：2014-06-09 03:29:05
【问题描述】：

我已经看到关于使用 JQuery 和 mysql 的搜索框的示例，但是查看更多功能不起作用。如何改进程序。当我单击查看更多时，我可以看到接下来的 10 条记录。谢谢

<script type="text/javascript">
$(document).ready(function()
{
  $("#keywords").keyup(function()
  {
    var kw = $("#keywords").val();
    if(kw != '')  
     {
      $.ajax
      ({
         type: "POST",
         url: "search.php",
         data: "kw="+ kw,
         success: function(option)
         {
           $("#results").html(option);
         }
      });
     }
     else
     {
       $("#results").html("");
     }
    return false;
  });

   $(".overlay").click(function()
   {
     $(".overlay").css('display','none');
     $("#results").css('display','none');
   });
   $("#keywords").focus(function()
   {
     $(".overlay").css('display','block');
     $("#results").css('display','block');
   });
});
</script>



<div id="inputbox">
    <input type="text" id="keywords" name="keywords" value="" placeholder="Type Your Query..."/>
  </div>
</div>
<div id="results"></div>
<div class="overlay"></div>

我们提取该键的值并将其发送到 search.php

<?php
include('db.php');
//file which contains the database details.
?>
<?php
if(isset($_POST['kw']) && $_POST['kw'] != '')
{
  $kws = $_POST['kw'];
  $kws = mysql_real_escape_string($kws); 
  $query = "select * from wp_posts where post_name like '%".$kws."%' and (post_type='post' and post_status='publish') limit 10" ;
  $res = mysql_query($query);
  $count = mysql_num_rows($res);
  $i = 0;

  if($count > 0)
  {
    echo "<ul>";
    while($row = mysql_fetch_array($res))
    {
      echo "<a href='$row[guid]'><li>";
      echo "<div id='rest'>";
      echo $row['post_name'];
      echo "<br />";
      echo "<div id='auth_dat'>".$row['post_date']."</div>";
      echo "</div>";
      echo "<div style='clear:both;'></div></li></a>";
      $i++;
      if($i == 5) break;
    }
    echo "</ul>";
    if($count > 5)
    {
      echo "<div id='view_more'><a href='#'>View more results</a></div>";
    }
  }
  else
  {
    echo "<div id='no_result'>No result found !</div>";
  }
}
?>

按查看更多结果不会显示更多结果。

【问题讨论】：

你确实有表单标签，对？
你的意思是 id='view_more'？
对不起~不明白~
输入需要包裹在表单标签中。
你的意思是这里-->

标签： php jquery mysql ajax search

【解决方案1】：

如果我没记错的话，你想用 ajax 带来下 10 个吗？这种情况表现为分页，您必须将当前点击计数存储在 javascript 中。没有点击更多按钮，clickCount的变量为0，当你点击更多时，你的变量clickCount=1，在发送 ajax 时，将 clickCount 发送到 php。

 $.ajax
  ({
     type: "POST",
     url: "search.php",
     data: "kw="+ kw+"&clickCount="+clickCount,
     success: function(option)
     {
       $("#results").html(option);
     }
  });

可以用limit&offset (clickCount)*10, itemCountForEachMoreClick = limit 0,10查询当点击更多限制 10,10 当再点击一个限制 20,10。不要忘记在 keyPress 上重置 clickCount！

php端

 $count = isset($_REQUEST["clickCount"])? $_REQUEST["clickCount"]:0;
$limitAndOffset = $count*10.",10";    
$query = "select * from wp_posts where post_name like '%".$kws."%' 
    and (post_type='post' and post_status='publish') limit ".$limitAndOffset  ;

【讨论】：