DEVTAI.COM

Workshop Autocomplete with PHP Ajax MySQL พร้อมตัวอย่าง Code + DB

Workshop Autocomplete with PHP Ajax MySQL พร้อมตัวอย่าง Code + DB

วัยวุฒิ ชุมเมืองปัก PHP
จำนวนคนเข้าดู: 870

Workshop Autocomplete with PHP Ajax MySQL

  • ก่อนอื่นนะครับ ให้ทุกคนสร้างฐานข้อมูลชื่อว่า ajaxdb อั้นนี้แล้วแต่คนจะตั้งชื่อนะครับ
  • เวลาเรียกเชื่อต่อฐานข้อมูลไฟล์ connection ให้ตรงกับชื่อที่เรานะครับ

ตัวอย่างการสร้างตาราง autocomplete

  • เป็น SQL สามารถไปวางใน SQL ใน phpmyadmin ได้เลยครับ แต่ต้องสร้างชื่อฐานข้อมูลก่อนนครับ เช่น ajaxdb แล้วเอาโค้ดด้านบนไปวางใน sql

ฟรี ระบบร้านค้าออนไลน์ Shopping Cart 

  • ขั้นตอนต่อมาเป็นการสร้างหน้าฟอร์ม สำหรับไว้กรอกข้อมูล
    • autocomplete.html
      ตัวอย่างโค้ด

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        .hint {
            font-size: 10px;
            font-family: Verdana, Geneva, sans-serif;
            border: 1px solid blue;
            margin-left: 50px;
        }
 
        .hint tr td a {
            text-decoration: none;
        }
 
        .hint tr td a:hover {
            background-color: #CCC;
        }
    </style>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#word").keyup(function () {
                $.post("autocomplete.php", { word: $("#word").val() },
                    function (data, status) {
                        $("#hint").html(data);
                    });
            });
        });
 
        function setterm(term) {
            $("#word").val(term);
            $("#hint").html('');
        }
    </script>
</head>
<body>
    <div class="container">
    <h1>Autocomplete php + ajax + mysql</h1>
    <div class="col-md-6">คำค้น : <input type="text" class="form-control" placeholder="กรอกข้อมูลลงในช่อง" id="word" /><span id="hint"></span></div>
     </div>
</body>
</html>

  • ขั้นตอนต่อมาเป็นการสร้างไฟล์เชื่อมต่อฐานข้อมูล
    • connection.php

1
2
3
4
5
6
7
8
9
10
11
12
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "ajaxdb";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>

  • ขั้นตอนสุดท้ายเป็นการ ดึงข้อมูลจากตาราง autocomplete ขึ้นมาแสดงให้เลือกก่อนกรอกข้อมูล
    • autocomplete.php ** save เป็นไฟล์ .php นะครับ
    • ตัวอย่างโค้ด

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
include("connection.php");
$word = $_REQUEST['word'];
 
// สร้างคำสั่ง SQL เพื่อค้นหาข้อมูลที่ตรงกับคำที่ผู้ใช้ป้อน
$sql = "SELECT * FROM autocomplete WHERE term LIKE '%$word%'";
$result = $conn->query($sql);
 
if ($result->num_rows > 0) {
    echo "<table class = 'hint'>";
    while ($row = $result->fetch_assoc()) {
        echo "<a class='form-control' onclick='setterm(\"" . $row['term'] . "\")'>" . $row['term'] . "</a>";
    }
    echo "</table>";
}
 
$conn->close()
 
?>

ระบบขายหน้าร้าน Food Pos (point of sale) 3,000 บาท

ระบบ ฝากขายสินค้าออนไลน์ PHP7 MySQLi AdminLTE

ระบบนี้เป็นการขายขาดให้พร้อมชุดโค้ดทั้งหมดและฐานข้อมูล นำไปพัฒนาต่อได้ครับ 
ราคา 6,000 บาท ลดได้นิดหน่อย ทักมาคุยกันได้ครับ 

คอร์สฟรี: สอนทำระบบเอกสารออนไลน์ (Document) PHP MySQLi

ระบบจองคิวช่างแต่งหน้า/ตัดผม ราคา 7,900 บาท ลดได้ 7,000 บาท
พร้อมโค้ดทั้งหมดและฐานข้อมูล

 

สนใจจ้างพัฒนาระบบ เขียนระบบ ทำเว็บไซต์ รับสอนเขียนโปรแกรม inbox มาที่เพจ หรือติดต่อ 098-373-8651 ช่องทางการชำระเงิน เงินสด หรือ e-banking ธนาคารกสิกรไทย เลขบัญชี : 0951168564 ชื่อบัญชี : นายวัยวุฒิ ชุมเมืองปัก
ติดต่อ สอบถามข้อมูลเพิ่มเติม