صفحه اصلی » آموزش به کمک کد » پر شدن خودکار کادر جستجو
پر شدن خودکار کادر جستجو
پر شدن خودکار کادر جستجو

پر شدن خودکار کادر جستجو

با سلام

در این آموزش قصد داریم نحوه پر شدن خودکار کادر جستجو  را به کمک PHP و MySQL آموزش بدیم. در این آموزش هدف فقط پر شدن خودکار کادر جستجو نیست بلکه به کمک اسکریپت سمت سرور و بهره‌گیری از داده‌های jason این فرایند را پویاتر می‌کنیم. با ما همراه باشید.

بخش پایگاه داده و جداول

به کمک پایگاه داده و جدول زیر با نام “tbl_posts”؛ داده‌ها که شامل عنوان پست و Url آن می‌باشد، استخراج می‌شود:

-- Table structure for table `tbl_posts`
--
 
CREATE TABLE IF NOT EXISTS `tbl_posts` (
  `postID` int(11) NOT NULL AUTO_INCREMENT,
  `postTitle` varchar(255) NOT NULL,
  `postUrl` varchar(255) NOT NULL,
  PRIMARY KEY (`postID`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=11 ;
 
--
-- Dumping data for table `tbl_posts`
--
 
INSERT INTO `tbl_posts` (`postID`, `postTitle`, `postUrl`) VALUES
(۱, 'Simple jQuery Add, Update, Delete with PHP and MySQL', 'http://goo.gl/IL6NTr'),
(۲, '۱۵ Free Bootstrap Admin Themes Demo and Download', 'http://goo.gl/1dBwEy'),
(۳, 'Easy Ajax Image Upload with jQuery, PHP', 'http://goo.gl/jXZ6LY'),
(۴, 'How to Send HTML Format eMails in PHP using PHPMailer', 'http://goo.gl/kQrzJP'),
(۵, 'Ajax Bootstrap Signup Form with jQuery PHP and MySQL', 'http://goo.gl/yxKrha'),
(۶, 'Submit PHP Form without Page Refresh using jQuery, Ajax', 'http://goo.gl/14vlBe'),
(۷, 'How to Convert MySQL Rows into JSON Format in PHP', 'http://goo.gl/qgOiwB'),
(۸, 'Designing Bootstrap Signup Form with jQuery Validation', 'http://goo.gl/nECERc'),
(۹, 'Upload, Insert, Update, Delete an Image using PHP MySQL', 'http://goo.gl/HRJrDD'),
(۱۰, 'Login Registration with Email Verification, Forgot Password using PHP', 'http://goo.gl/O9FKN1');
 
/*!۴۰۱۰۱ SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!۴۰۱۰۱ SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!۴۰۱۰۱ SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

کد مربوط به ارتباط پایگاه داده

<?php
 
 $DBhost = "localhost";
 $DBuser = "root";
 $DBpass = "";
 $DBname = "codingcage";
 
 try {
  $DBcon = new PDO("mysql:host=$DBhost;dbname=$DBname",$DBuser,$DBpass);
 } catch(PDOException $ex){
  die($ex->getMessage());
 }

اسکریپت سمت سرور (Post_search.php)

این فایل پیشنهادها را از جدول tbl_posts دریافت می‌کند و در پس زمینه عمل می‌کند و در واقع هنگامیکه کاربر متنی را تایپ می‌کند همزمان با آن پیشنهادهای مربوط به متن را به کمک Jason نشان می‌دهد.

<?php
 
 require_once 'dbconfig.php';
 
 $keyword = trim($_REQUEST['term']); // this is user input
 
 $sugg_json = array();    // this is for displaying json data as a autosearch suggestion
 $json_row = array();     // this is for stroring mysql results in json string
 
 
 $keyword = preg_replace('/\s+/', ' ', $keyword); // it will replace multiple spaces from the input.
 
 $query = 'SELECT postID, postTitle, postUrl FROM tbl_posts WHERE postTitle LIKE :term'; // select query
 
 $stmt = $DBcon->prepare( $query );
 $stmt->execute(array(':term'=>"%$keyword%"));
 
 if ( $stmt->rowCount()>0 ) {
 
  while($recResult = $stmt->fetch(PDO::FETCH_ASSOC)) {
      $json_row["id"] = $recResult['postUrl'];
      $json_row["value"] = $recResult['postTitle'];
      $json_row["label"] = $recResult['postTitle'];
      array_push($sugg_json, $json_row);
  }
 
 } else {
     $json_row["id"] = "#";
     $json_row["value"] = "";
     $json_row["label"] = "Nothing Found!";
     array_push($sugg_json, $json_row);
 }
 
 $jsonOutput = json_encode($sugg_json, JSON_UNESCAPED_SLASHES); 
 print $jsonOutput;

کادر جستجو

برای اینکه کادر جستجو جالبتر باشد به کمک بوت‌استرپ یک جعبه جستجوی ساده، طراحی می‌کنیم:

<div class="col-lg-offset-2">
<form>
<div class="form-group">
<div class="input-group">
<input id="txtSearch" class="form-control input-lg" type="text" placeholder="Search for PHP, MySQL, Ajax and jQuery" />
<div class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div>
</div>
</div>
</form>  
</div>

جاوا اسکریپت / کد پرشدن خودکار کادر جستجو JQuery

به کمک کدهای جاوا اسکریپت زیر، کادر جستجو پویاتر و کاراتر شده است. با استفاده از تابع autocomplete قابلیت پرکردن خودکار فعال می‌شود.

$(document).ready(function(){
 
 $('#txtSearch').autocomplete({
     source: "post_search.php",
     minLength: 2,
     select: function(event, ui) {
         var url = ui.item.id;
         if (url != '#') {
             location.href = url
         }
     },
     open: function(event, ui) {
         $(".ui-autocomplete").css("z-index", 1000)
     }
 })
 
});

سورس مربوط به صفحه اصلی (Index.php)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>AutoComplete Example in PHP MySQL</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
 
<body>
 
 <div class="container">
 
     <div class="page-header">
        <h3 style="color:#00a2d1; font-size:30px; font-family: Impact, Charcoal, sans-serif; text-align: center;">AutoComplete Search with Href Link in PHP MySQL</h3>
        </div>
 
        <div class="row">
 
         <div class="col-lg-12 text-center">
 
         <div class="col-lg-offset-2">
             <form>
             <div class="form-group">
             <div class="input-group">
             <input id="txtSearch" class="form-control input-lg" type="text" placeholder="Search for PHP, MySQL, Ajax and jQuery" />
             <div class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div>
             </div>
             </div>
             </form>  
             </div> 
 
            </div>
 
        </div>
 
    </div>
 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
 
<script>
$(document).ready(function(){
 
 $('#txtSearch').autocomplete({
     source: "post_search.php",
     minLength: 2,
     select: function(event, ui) {
         var url = ui.item.id;
         if (url != '#') {
             location.href = url
         }
     },
     open: function(event, ui) {
         $(".ui-autocomplete").css("z-index", 1000)
     }
 })
 
}); 
</script>
 
</body>
</html>

 

سورس کد این آموزش را از لینک زیر می توانید دانلود کنید:

دانلود سورس کد

درباره بهزاد

باید دنیا را کمی بهتر از آنچه تحویل گرفته ای،تحویل دهی خواه با فرزندی خوب؛ خواه با باغچه ای سرسبز؛ خواه با اندکی بهبود شرایط اجتماعی. و اینکه بدانی اگر حتی فقط یک نفر با بودن تو ساده تر نفس کشیده است، یعنی تو موفق بوده ای...

پاسخی بنویسید

آدرس ایمیل شما منتشر نمی شود.فیلدهای الزامی علامت گذاری شده اند. *

*