請選擇 進入手機版 | 繼續訪問電腦版

Panaplat Forum

 找回密碼
 立即註冊
搜索
熱搜: Tieng Viet
查看: 789|回復: 0

Ajax Live Data Search using Jquery PHP MySql

[複製鏈接]
發表於 2017-5-26 11:11:48 | 顯示全部樓層 |閱讀模式
本帖最後由 Edward 於 2017-5-26 11:13 編輯
  1. index.php
  2. <html>
  3. <head>
  4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.   <title>Webslesson Tutorial</title>
  6.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  7.   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  8.   <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
  9. </head>
  10. <body>
  11.   <div class="container">
  12.    <br />
  13.    <h2 align="center">Ajax Live Data Search using Jquery PHP MySql</h2><br />
  14.    <div class="form-group">
  15.     <div class="input-group">
  16.      <span class="input-group-addon">Search</span>
  17.      <input type="text" name="search_text" id="search_text" placeholder="Search by Customer Details" class="form-control" />
  18.     </div>
  19.    </div>
  20.    <br />
  21.    <div id="result"></div>
  22.   </div>
  23. </body>
  24. </html>


  25. <script>
  26. $(document).ready(function(){

  27. load_data();

  28. function load_data(query)
  29. {
  30.   $.ajax({
  31.    url:"fetch.php",
  32.    method:"POST",
  33.    data:{query:query},
  34.    success:function(data)
  35.    {
  36.     $('#result').html(data);
  37.    }
  38.   });
  39. }
  40. $('#search_text').keyup(function(){
  41.   var search = $(this).val();
  42.   if(search != '')
  43.   {
  44.    load_data(search);
  45.   }
  46.   else
  47.   {
  48.    load_data();
  49.   }
  50. });
  51. });
  52. </script>

  53. fetch.php
  54. <?php
  55. //fetch.php
  56. $connect = mysqli_connect("localhost", "root", "", "testing");
  57. $output = '';
  58. if(isset($_POST["query"]))
  59. {
  60. $search = mysqli_real_escape_string($connect, $_POST["query"]);
  61. $query = "
  62.   SELECT * FROM tbl_customer
  63.   WHERE CustomerName LIKE '%".$search."%'
  64.   OR Address LIKE '%".$search."%'
  65.   OR City LIKE '%".$search."%'
  66.   OR PostalCode LIKE '%".$search."%'
  67.   OR Country LIKE '%".$search."%'
  68. ";
  69. }
  70. else
  71. {
  72. $query = "
  73.   SELECT * FROM tbl_customer ORDER BY CustomerID
  74. ";
  75. }
  76. $result = mysqli_query($connect, $query);
  77. if(mysqli_num_rows($result) > 0)
  78. {
  79. $output .= '
  80.   <div class="table-responsive">
  81.    <table class="table table bordered">
  82.     <tr>
  83.      <th>Customer Name</th>
  84.      <th>Address</th>
  85.      <th>City</th>
  86.      <th>Postal Code</th>
  87.      <th>Country</th>
  88.     </tr>
  89. ';
  90. while($row = mysqli_fetch_array($result))
  91. {
  92.   $output .= '
  93.    <tr>
  94.     <td>'.$row["CustomerName"].'</td>
  95.     <td>'.$row["Address"].'</td>
  96.     <td>'.$row["City"].'</td>
  97.     <td>'.$row["PostalCode"].'</td>
  98.     <td>'.$row["Country"].'</td>
  99.    </tr>
  100.   ';
  101. }
  102. echo $output;
  103. }
  104. else
  105. {
  106. echo 'Data Not Found';
  107. }

  108. ?>

  109. --
  110. -- Database: `testing`
  111. --

  112. -- --------------------------------------------------------

  113. --
  114. -- Table structure for table `tbl_customer`
  115. --

  116. CREATE TABLE IF NOT EXISTS `tbl_customer` (
  117.   `CustomerID` int(11) NOT NULL AUTO_INCREMENT,
  118.   `CustomerName` varchar(250) NOT NULL,
  119.   `Address` text NOT NULL,
  120.   `City` varchar(250) NOT NULL,
  121.   `PostalCode` varchar(30) NOT NULL,
  122.   `Country` varchar(100) NOT NULL,
  123.   PRIMARY KEY (`CustomerID`)
  124. ) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=14 ;

  125. --
  126. -- Dumping data for table `tbl_customer`
  127. --
  128. INSERT INTO `tbl_customer` (`CustomerID`, `CustomerName`, `Address`, `City`, `PostalCode`, `Country`) VALUES
  129. (1, 'Maria Anders', 'Obere Str. 57', 'Berlin', '12209', 'Germany'),
  130. (2, 'Ana Trujillo', 'Avda. de la Construction 2222', 'Mexico D.F.', '5021', 'Mexico'),
  131. (3, 'Antonio Moreno', 'Mataderos 2312', 'Mexico D.F.', '5023', 'Mexico'),
  132. (4, 'Thomas Hardy', '120 Hanover Sq.', 'London', 'WA1 1DP', 'UK'),
  133. (5, 'Paula Parente', 'Rua do Mercado, 12', 'Resende', '08737-363', 'Brazil'),
  134. (6, 'Wolski Zbyszek', 'ul. Filtrowa 68', 'Walla', '01-012', 'Poland'),
  135. (7, 'Matti Karttunen', 'Keskuskatu 45', 'Helsinki', '21240', 'Finland'),
  136. (8, 'Karl Jablonski', '305 - 14th Ave. S. Suite 3B', 'Seattle', '98128', 'USA'),
  137. (9, 'Paula Parente', 'Rua do Mercado, 12', 'Resende', '08737-363', 'Brazil'),
  138. (10, 'Pirkko Koskitalo', 'Torikatu 38', 'Oulu', '90110', 'Finland'),
  139. (11, 'Paul Henriot', '2, rue du Commerce', 'Reims', '51100', 'France'),
  140. (12, 'Helvetius Nagy', '722 DaVinci Blvd.', 'Kirkland', '98034', 'USA'),
  141. (13, 'Karin Josephs', 'Luisenstr. 48', 'Butte', '59801', 'USA');

複製代碼

回復

使用道具 舉報

您需要登錄後才可以回帖 登錄 | 立即註冊

本版積分規則

小黑屋|手機版|Archiver|Panaplat Forum

GMT+8, 2020-8-8 11:34 , Processed in 0.052726 second(s), 15 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回復 返回頂部 返回列表