如何使用keyup事件使我的分页在搜索结果中正常工作?

时间:2012-04-30 21:27:59

标签: php jquery mysql

我正在使用keyup()函数将变量发送到php页面(consult.php),该页面具有mysql select以带来我的搜索结果。

的index.php

<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
 $('#input').keyup(function(){
  var inputVal=$('#input').val();
  $.ajax({
   type: 'POST',
   data: ({word : inputVal}),
   url: 'consult.php',
   success: function(data) {
    $('#content').html(data);
   }
  });
 });
 $("#menu li").click(function(){
  $.ajax({
   type: 'POST',
   data: ({word : inputVal}),
   url: 'consult.php',
   success: function(data) {
    $('#content').html(data);
  }
  });
 });
});
</script>
<style>
 #menu ul{
  margin:0;
  padding:0;
  list-style:none;
 }
 #menu ul li{
  padding:5px;
  margin-right:2px;
  float:left;
  border:#00F solid 1px;
  background-color:#faa8ad;
}
</style>
</head>
<body>
 <div>Write<br>
  <input type="text" id="input" name="input"/>
 </div>
<div id="content"></div>
</body>
</html>

consult.php

<?
 include('conn.php');
 $word = isset($_POST['word']) ? $_POST['word'] : $_GET['word'];
 if($word){

  $perPag = 4;
  $query = mysql_query("SELECT COUNT(carro_id) FROM carros WHERE carro_modelo LIKE '$word%'");
  $totalResult = ceil(mysql_result($query, 0)/$perPag);

  $pag = (isset($_GET['pag']) and (int)$_GET['pag'] > 0) ? (int)$_GET['pag'] : 1;
  $ini = ($pag - 1) * $perPag;

  $queryTotal = mysql_query("SELECT carro_modelo FROM carros WHERE carro_modelo LIKE '$word%' ORDER BY carro_id LIMIT $ini, $perPag");
      while($row = mysql_fetch_assoc($queryTotal)){
       echo "<div>".$row['carro_modelo']."</div>";
      }
  if($totalResult >= 1 && $pag <= $totalResult){
   for($i = 1; $i <= $totalResult; $i++){
    echo($i == $pag) ? '<div id="menu"><ul><li><strong><a href="?pag='.$i.'&word='.$word.'">'.$i.'</a></strong></li></ul></div> ' : '<div id="menu"><ul><li><a href="?pag='.$i.'&word='.$word.'">'.$i.'</a></li></ul></div> ';
   }
  }
 }else{
  $queryTotalReult = mysql_query("SELECT * FROM carros");
  while($rowTotal = mysql_fetch_assoc($queryTotalReult)){
   echo "<div>".$rowTotal['carro_modelo']."</div>";
  }
 }
?>

问题是,当我点击分页的链接时,它会将结果加载到index.php中,从而再次忽略搜索结果。

提前谢谢你!

2 个答案:

答案 0 :(得分:2)

的index.php

<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
function ajaxCall(inPage,inWord)
{

      $.ajax({
       type: 'POST',
       data: ({word : inWord, pag : inPage}),
       url: 'consult.php',
       success: function(data) {
        $('#content').html(data);
       }});
}
    $(function(){
     $('#input').keyup(function(){
      var inputVal=$('#input').val();
      $.ajax({
       type: 'POST',
       data: ({word : inputVal}),
       url: 'consult.php',
       success: function(data) {
        $('#content').html(data);
       }
      });
     });
    });
    </script>
    <style>
     #menu ul{
      margin:0;
      padding:0;
      list-style:none;
     }
     #menu ul li{
      padding:5px;
      margin-right:2px;
      float:left;
      border:#00F solid 1px;
      background-color:#faa8ad;
    }
    </style>
    </head>
    <body>
     <div>Write<br>
      <input type="text" id="input" name="input"/>
     </div>
    <div id="content"></div>
    </body>
    </html>

consult.php

<?
 include('conn.php');
 $word = isset($_POST['word']) ? $_POST['word'] : $_GET['word'];
 if($word){
  $perPag = 4;
  $query = mysql_query("SELECT COUNT(carro_id) FROM carros WHERE carro_modelo LIKE '$word%'");
  $totalResult = ceil(mysql_result($query, 0)/$perPag);
  $pag = (isset($_GET['pag']) and (int)$_GET['pag'] > 0) ? (int)$_GET['pag'] : 1;
  $ini = ($pag - 1) * $perPag;
  $queryTotal = mysql_query("SELECT carro_modelo FROM carros WHERE carro_modelo LIKE '$word%' ORDER BY carro_id LIMIT $ini, $perPag");
      while($row = mysql_fetch_assoc($queryTotal)){
       echo "<div>".$row['carro_modelo']."</div>";
      }
  if($totalResult >= 1 && $pag <= $totalResult){
   for($i = 1; $i <= $totalResult; $i++){
    echo($i == $pag) ? '<div id="menu"><ul><li><strong><a onclick="ajaxCall('.$i.',\''.$word.'\')">'.$i.'</a></strong></li></ul></div> ' : '<div id="menu"><ul><li><a onclick="ajaxCall('.$i.',\''.$word.'\')">'.$i.'</a></li></ul></div> ';
   }
  }
 }else{
  $queryTotalReult = mysql_query("SELECT * FROM carros");
  while($rowTotal = mysql_fetch_assoc($queryTotalReult)){
   echo "<div>".$rowTotal['carro_modelo']."</div>";
  }
 }
?>

答案 1 :(得分:1)

在您的查询中,您有$ initial,但在作业中您有$ ini。也许尝试使这些相同:)