首页>>表单>>ajax 搜索,无刷新搜索 php+mysql(2014-03-05)

ajax 搜索,无刷新搜索 php+mysql

ajax 搜索,无刷新搜索 php+mysql
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="textBox">  
  2.   
  3.         <input type="text" value="" maxlength="100" name="searchBox" id="search">  
  4.   
  5.         <div class="searchBtn">  
  6.   
  7.            
  8.   
  9.         </div>  
  10.   
  11.     </div>  
  12.   
  13.     <br clear="all" />  
  14.   
  15.     <div id="content">  
  16.   
  17.         <div class="search-background">  
  18.   
  19.             <label><img src="loader.gif" alt="" /></label>  
  20.   
  21.         </div>  
  22.   
  23.         <div id="sub_cont">  
  24.   
  25.           
  26.   
  27.         </div>  
  28.   
  29.     </div>  

 

JavaScript Code
  1. <script language="javascript">  
  2.   
  3. $(document).ready(function(){  
  4.   
  5.     //show loading bar  
  6.   
  7.     function showLoader(){  
  8.   
  9.         $('.search-background').fadeIn(200);  
  10.   
  11.     }  
  12.   
  13.     //hide loading bar  
  14.   
  15.     function hideLoader(){  
  16.   
  17.         $('#sub_cont').fadeIn(1500);  
  18.   
  19.         $('.search-background').fadeOut(200);  
  20.   
  21.     };  
  22.   
  23.       
  24.   
  25.     $('#search').keyup(function(e) {  
  26.   
  27.     
  28.   
  29.       if(e.keyCode == 13) {  
  30.   
  31.     
  32.   
  33.         showLoader();  
  34.   
  35.         $('#sub_cont').fadeIn(1500);  
  36.   
  37.         $("#content #sub_cont").load("search.php?val=" + $("#search").val(), hideLoader());  
  38.   
  39.   
  40.   
  41.       }  
  42.   
  43.     
  44.   
  45.       });  
  46.   
  47.         
  48.   
  49.     $(".searchBtn").click(function(){  
  50.   
  51.       
  52.   
  53.         //show the loading bar  
  54.   
  55.         showLoader();  
  56.   
  57.         $('#sub_cont').fadeIn(1500);  
  58.   
  59.             
  60.   
  61.         $("#content #sub_cont").load("search.php?val=" + $("#search").val(), hideLoader());  
  62.   
  63.   
  64.   
  65.     });  
  66.   
  67. });  
  68.   
  69. </script>  

 search.php

PHP Code
  1. <?php  
  2.   
  3. function checkValues($value)  
  4. {  
  5.      // Use this function on all those values where you want to check for both sql injection and cross site scripting  
  6.      //Trim the value  
  7.      $value = trim($value);  
  8.        
  9.     // Stripslashes  
  10.     if (get_magic_quotes_gpc()) {  
  11.         $value = stripslashes($value);  
  12.     }  
  13.       
  14.      // Convert all <, > etc. to normal html and then strip these  
  15.      $value = strtr($value,array_flip(get_html_translation_table(HTML_ENTITIES)));  
  16.       
  17.      // Strip HTML Tags  
  18.      $value = strip_tags($value);  
  19.       
  20.     // Quote the value  
  21.     $value = mysql_real_escape_string($value);  
  22.     return $value;  
  23.       
  24. }     
  25.   
  26. require "../../conn.php";  
  27.   
  28. $rec = checkValues($_REQUEST['val']);  
  29.   
  30.   
  31.   
  32. //get table contents  
  33.   
  34.   
  35. if($rec)  
  36.   
  37. {  
  38.   
  39.     $sql = "select * from content where message like '%$rec%'";  
  40.   
  41. }  
  42.   
  43. else  
  44.   
  45. {  
  46.   
  47.     $sql = "select * from content";  
  48.   
  49. }  
  50.   
  51.   
  52.   
  53. $rsd = mysql_query($sql);  
  54.   
  55. $total =  mysql_num_rows($rsd);  
  56.   
  57. ?>  
  58.   
  59.   
  60.   
  61. <?php  
  62.   
  63. while ($rows = mysql_fetch_assoc($rsd))  
  64.   
  65. {?>  
  66.   
  67.     <div class="each_rec"><?php echo $rows['message'];?></div>  
  68.   
  69. <?php  
  70.   
  71. }  
  72.   
  73. if($total==0){ echo '<div class="no-rec">No Record Found !</div>';}?>  

 


原文地址:http://www.freejs.net/article_biaodan_282.html