Autocomplete : Jquery + Ajax [ค้นหาจังหวัด]

Posted by Mix 2016-01-23 23:00:00 View: 818

Autocomplete : Jquery + Ajax [ค้นหาจังหวัด]

สวัสดีครับ วันนี้ก็เป็นโพสที่ 2 แล้วน่ะครับ และยังเป็นโพสแรกที่ผมจะ "สอน" ห่ะ !! ฮ่า ๆ ใช่ครับ ปกติผมก็ได้แต่ศึกษาจาก ผู้คนมากมาย วันนี้ผมรู้สึกว่าการ "แบ่งปัน" มันทำให้เราพัฒนาและคนรอบข้างเราด้วยครับ ^^

โอเค เรามาเข้าเรื่องกันดีกว่าครับ สิ่งที่เราจะต้องเตรียมคือไฟล์ Bootstrap จะประกอบไปด้วย 

  • css
    • bootstrap.min.css
  • js
    • bootstrap.min.js

ผมใช้ Bootstrap เวอร์ชั่น 3.3.6

เรามาเริ่มกันเลยน่ะครับ สร้างไฟล์ index.php

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Autocomplete</title>
    <!-- Bootstrap -->
    <link href="dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="dist/css/style.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <div class="jumbotron text-center">
        <h3 class="text-center">ค้นหาจังหวัด</h3>
        <form class="form-inline text-center">
          <div class="form-group">
            <input type="text" class="form-control" id="search-box" placeholder="">
            <div id="suggesstion-box"></div>
          </div>
        </form>
      </div>
    </div> <!-- /container -->
    <script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
    <script src="dist/js/bootstrap.min.js"></script>
    </script>
  </body>
</html>

จากนั้นสร้าง Script 

//AJAX call for autocomplete
    $(document).ready(function(){
      $("#search-box").keyup(function(){
        $.ajax({
        type: "POST",
        url: "check_province.php",
        data:'keyword='+$(this).val(),
        beforeSend: function(){
          $("#search-box").css("background","#FFF url(LoaderIcon.gif) no-repeat 165px");
        },
        success: function(data){
          $("#suggesstion-box").show();
          $("#suggesstion-box").html(data);
          $("#search-box").css("background","#FFF");
        }
        });
      });
    });
    //To select Province name
    function selectProvince(val) {
    $("#search-box").val(val);
    $("#suggesstion-box").hide();
    }

จาก Scirpt ได้ทำการเรียกหาไฟล์ ที่ ชื่อว่า check_province.php

ดังนั้น ให้เราสร้างไฟล์ชื่อว่า check_province.php

<ul id="province-list" class="nav nav-pills nav-stacked">
<?php
require 'config/connect.php';
if (!empty($_POST)) {
    $keyword = $_POST['keyword'];
    $pdo = Database::connect();
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $sql = "SELECT * FROM `province` WHERE `PROVINCE_NAME` LIKE '%".$keyword."%' ORDER BY `PROVINCE_NAME` LIMIT 0,6";
    foreach ($pdo->query($sql) as $row) {
    $province_name = $row['PROVINCE_NAME'];
 ?>
    <li onClick="selectProvince('<?php echo $province_name;?>')"><?php echo $province_name;?></li>

<?php    }
    Database::disconnect();
} ?>
</ul>

อย่าลืม สร้างไฟล์ connect.php เพื่อเชื่อมต่อการ Database หล่ะ

ไฟล์ connect.php ตามนี้เลยครับ 

<?php
class Database
{
    private static $dbName = 'thailand_'; //ชื่อdatabase
    private static $dbHost = 'localhost';
    private static $dbUsername = 'root'; //user
    private static $dbUserPassword = ''; //pass
   
    private static $cont  = null;
    
    
    public function __construct() {
        die('Init function is not allowed');
    }
     
    public static function connect()
    {
       // One connection through whole application
       if ( null == self::$cont )
       {     
        try
        {
          self::$cont =  new PDO( "mysql:host=".self::$dbHost.";"."dbname=".self::$dbName, self::$dbUsername, self::$dbUserPassword); 
              self::$cont->exec("SET NAMES UTF8");
        }
        catch(PDOException $e)
        {
          die($e->getMessage()); 
        }
       }
       return self::$cont;
    }
     
    public static function disconnect()
    {
        self::$cont = null;
    }

}
?>

ลองทำตามดูน่ะครับ ^^ 

ตัวอย่าง ดาวน์โหลดไฟล์