สร้างฟังก์ชัน autocomplete ให้ใช้งานแบบง่าย ด้วย ajax

05 July 2009 เขียนเมื่อ 14 ปีก่อน โดย Ninenik Narkdee

ajax php autocomplete

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ajax php autocomplete

ดูแล้ว 81,813 ครั้ง

UPDATE! อัพเดทล่าสุด 02-07-2019
- 02-07-2562 | ใครที่มีปัญหา autocomplete ทำงานไม่ได้ ให้โหลดไฟล์ autocomplete.js ไปใหม่ไปแทนตัวเดิม และเคลียร์แคชก่อนใช้งาน
หนือกำหนดตอนเรียกใช้ โดยเพิ่มในรูปแบบ autocomplete.js?วันที่เดือนปี เช่น autocomplete.js?02072019

<script type="text/javascript" src="autocomplete/autocomplete.js?02072019 "></script>

ตัวอย่าง

ไฟล์ที่จำเป็นต้องใช้
1.autocomplete.js
2.autocomplete.css
3.autocomplete.gif
ทำการดาวโหลดโดยคลิกขวาที่ลิ้งไฟล์ด้านบน แล้วทำการบันทึก

แก้ไข 26-02-2017 รองรับ mysqli

ไฟล์ dbconnect.php

<?php  
$mysqli = new mysqli("localhost", "root","","test");  
/* check connection */ 
if ($mysqli->connect_errno) {  
    printf("Connect failed: %s\n", $mysqli->connect_error);  
    exit();  
}  
if(!$mysqli->set_charset("utf8")) {  
    printf("Error loading character set utf8: %s\n", $mysqli->error);  
    exit();  
}

ไฟล์ตัวอย่าง

<?php
require_once('inc/dbconnect.php');
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<script type="text/javascript" src="autocomplete/autocomplete.js"></script>
<link rel="stylesheet" href="autocomplete/autocomplete.css"  type="text/css"/>
</head>

<body>

<form id="form1" name="form1" method="post" action="">
  <input name="show_province" type="text" id="show_province" size="50" />
  <input name="h_province_id" type="hidden" id="h_province_id" value="" />
</form>



<script type="text/javascript">
function make_autocom(autoObj,showObj){
    var mkAutoObj=autoObj; 
    var mkSerValObj=showObj; 
    new Autocomplete(mkAutoObj, function() {
        this.setValue = function(id) {      
            document.getElementById(mkSerValObj).value = id;
        }
        if ( this.isModified )
            this.setValue("");
        if ( this.value.length < 1 && this.isNotClick ) 
            return ;    
        return "gdata.php?q=" +encodeURIComponent(this.value);
    }); 
}   
  
// การใช้งาน
// make_autocom(" id ของ input ตัวที่ต้องการกำหนด "," id ของ input ตัวที่ต้องการรับค่า");
make_autocom("show_province","h_province_id");
</script>
</body>
</html>

ไฟล์ gdata.php

<?php
header("Content-type:text/html; charset=UTF-8");        
header("Cache-Control: no-store, no-cache, must-revalidate");       
header("Cache-Control: post-check=0, pre-check=0", false);     
require_once('inc/dbconnect.php');
if(isset($_GET['q']) && $_GET['q']!=""){
	$q = urldecode($_GET["q"]);
	$q = $mysqli->real_escape_string($q);
	
	$pagesize = 50; // จำนวนรายการที่ต้องการแสดง
	$table_db="tbl_provinces"; // ตารางที่ต้องการค้นหา
	$find_field="province_name"; // ฟิลที่ต้องการค้นหา
	$sql = "
	SELECT 
	province_id,
	province_name
	FROM $table_db WHERE LOCATE('$q', $find_field) > 0 
	ORDER BY LOCATE('$q', $find_field), $find_field LIMIT $pagesize
	";
	$result = $mysqli->query($sql);
	if($result && $result->num_rows>0){
		while($row = $result->fetch_assoc()){
			// กำหนดฟิลด์ที่ต้องการส่ง่กลับ ปกติจะใช้ primary key ของ ตารางนั้น
			$id = $row["province_id"]; // 
			
			// จัดการกับค่า ที่ต้องการแสดง 
			$name = trim($row["province_name"]);// ตัดช่องวางหน้าหลัง
			$name = addslashes($name); // ป้องกันรายการที่ ' ไม่ให้แสดง error
			$name = htmlspecialchars($name); // ป้องกันอักขระพิเศษ

			// กำหนดรูปแบบข้อความที่แใดงใน li ลิสรายการตัวเลือก
    		$display_name = preg_replace("/(" .$q. ")/i", "<b>$1</b>", $name);
			echo "
				<li onselect=\"this.setText('$name').setValue('$id')\">
					$display_name
				</li>
			";	
		}
	}
	$mysqli->close();
}
?>

กรณีต้องการนำไปประยุกต์ใช้ในรูปแบบ autofill

สามารถใช้ ajax ใน jquery มาใช้ได้ดังนี้

สมมติ โค้ดตัวอย่างของเราเป็นการ แสดงข้อมูลของจังหวัด จาก autocomplete โดย

เมื่อทำการเลือกรายการจังหวัดนั้นๆ แล้วให้ทำการแสดงข้อมูลของจังหวัดที่เลือกเพิ่มเติม

ใน textbox หรือส่วนที่เราต้องการ ดูรูป ตัวอย่างผลลัพธ์

หลักการทำงานคือ เราจะใช้ autocomplete ดึง id หรือ primary id ของ ข้อมูลมาก่อน

จากนั้นใช้ ajax ส่งค่า id นั้นๆ ไปทำการคิวรี่เพิ่มแสดงข้อมูลเพิ่มเติมที่ต้องการ

ให้เราสร้างไฟล์ g_fulldata.php รูปแบบโค้ดดังนี้

<?php
header("Content-type:application/json; charset=UTF-8");    
header("Cache-Control: no-store, no-cache, must-revalidate");         
header("Cache-Control: post-check=0, pre-check=0", false); 
require_once("inc/dbconnect.php");
$sql = "
 SELECT * FROM tbl_provinces WHERE province_id='".$_POST['id']."'
";
$result = $mysqli->query($sql);
if($result && $result->num_rows > 0){
    $row = $result->fetch_assoc();
        $json_data[] = array(
            "id" => $row['province_id'],
			"name_th" => $row['province_name'],
			"name_en" => $row['province_name_eng']
        );
}
// แปลง array เป็นรูปแบบ json string  
if(isset($json_data)){  
    $json= json_encode($json_data);    
    if(isset($_GET['callback']) && $_GET['callback']!=""){    
    echo $_GET['callback']."(".$json.");";        
    }else{    
    echo $json;    
    }    
}

โดยจากโค้ดไฟล์ตัวอย่าง เราจะทำการส่งค่าตัวแปร id ของจังหวัดที่เราได้มากจากการเลือกใน autocomplete

แล้วส่งค่าไปคิวรี่เพื่อเลือกข้อมูลที่ต้องการแสดงทั้งหมด และจัดในรูปแบบ json object เพื่อเรียกใช้จากไฟล์หลัก

ไฟล์หลักทดสอบ

<?php
require_once('inc/dbconnect.php');
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<script type="text/javascript" src="autocomplete/autocomplete.js"></script>
<link rel="stylesheet" href="autocomplete/autocomplete.css"  type="text/css"/>
</head>

<body>

<form id="form1" name="form1" method="post" action="">
  <p>
    <input name="show_province" type="text" id="show_province" size="50" />
    <input name="h_province_id" type="hidden" id="h_province_id" value="" />
    <br>
    <hr>
    ID:
    <input type="text" name="province_id" id="province_id">
    <br>
    Name: 
    <input type="text" name="province_name_th" id="province_name_th">
    <br>
    Name English:
    <input type="text" name="province_name_en" id="province_name_en">
<br>
  </p>
</form>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>   
<script type="text/javascript">
function make_autocom(autoObj,showObj){
    var mkAutoObj=autoObj; 
    var mkSerValObj=showObj; 
    new Autocomplete(mkAutoObj, function() {
        this.setValue = function(id) {      
            document.getElementById(mkSerValObj).value = id;
			// ถ้ามี id ที่ได้จากการเลือกใน autocomplete 
			if(id!=""){
				// ส่งค่าไปคิวรี่เพื่อเรียกข้อมูลเพิ่มเติมที่ต้องการ โดยใช้ ajax 
				$.post("g_fulldata.php",{id:id},function(data){
					if(data!=null && data.length>0){ // ถ้ามีข้อมูล
							// นำข้อมูลไปแสดงใน textbox ที่่เตรียมไว้
							$("#province_id").val(data[0].id);
							$("#province_name_th").val(data[0].name_th);
							$("#province_name_en").val(data[0].name_en);
					}
				});
			}else{
				// ล้างค่ากรณีไม่มีการส่งค่า id ไปหรือไม่มีการเลือกจาก autocomplete
				$("#province_id").val("");
				$("#province_name_th").val("");
				$("#province_name_en").val("");				
			}
        }
        if ( this.isModified )
            this.setValue("");
        if ( this.value.length < 1 && this.isNotClick ) 
            return ;    
        return "gdata.php?q=" +encodeURIComponent(this.value);
    }); 
}   
  
// การใช้งาน
// make_autocom(" id ของ input ตัวที่ต้องการกำหนด "," id ของ input ตัวที่ต้องการรับค่า");
make_autocom("show_province","h_province_id");
</script>
</body>
</html>

เพิ่มเติมเนื้อหา ครั้งที่ 1 วันที่ 01-05-2018

หรือสามารถใช้งาน jqueryui autocomplete โดย
ดูการประยุกต์เพิ่มเติมที่เนื้อหาลิ้งค์นี้

https://www.ninenik.com/forum_view_2703_1.html#comment_6159

เพิ่มเติมเนื้อหา ครั้งที่ 2 วันที่ 24-10-2019

การส่งค่า autocomplete แรก ไปเป็นเงื่อนไขสำหรับ autocomplete ตัวที่สอง

เป็นแนวทาง ต่อยอดจากเนื้อหาบทความ http://niik.in/516

ไฟล์ทดสอบหลัก

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<script type="text/javascript" src="autocomplete/autocomplete.js?17062019"></script>  
<link rel="stylesheet" href="/demo/autocomplete_with_select/autocomplete/autocomplete.css"  type="text/css"/>  
</head>
 
<body>
 
 
<form id="form_department" name="form_department" method="post" action="">
<label for="departmentName">Department Name : </label>
  <input name="departmentName" type="text" id="departmentName" size="30" />
    <input type="hidden" name="h_departmentName" id="h_departmentName" />
  <br>
  <label for="departmentID">Office Name : </label>
  <input name="officerName" type="text" id="officerName" size="30" /><br />
<input type="hidden" name="h_officerName" id="h_officerName" />
</form>
 
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
 
});
</script>
<script type="text/javascript">  
function make_autocom(autoObj,showObj){  
    var mkAutoObj=autoObj;   
    var mkSerValObj=showObj;   
    new Autocomplete(mkAutoObj, function() {  
        this.setValue = function(id) {        
            document.getElementById(mkSerValObj).value = id;  
        }  
        if ( this.isModified )  
            this.setValue("");  
        if ( this.value.length < 1 && this.isNotClick )   
            return ;      
        if(mkAutoObj == 'officerName'){ //
            return "/demo/autocomplete_with_select/gOfficer.php?q=" +encodeURIComponent(this.value)+"&departmentID="+$("#h_departmentName").val();      
        }else{
            return "/demo/autocomplete_with_select/gDepartment.php?q=" +encodeURIComponent(this.value);     
        }
    });   
}    
    
// การใช้งาน  
// make_autocom(" id ของ input ตัวที่ต้องการกำหนด "," id ของ input ตัวที่ต้องการรับค่า");  
make_autocom("departmentName","h_departmentName");  
make_autocom("officerName","h_officerName");  
</script> 
</body>
</html>

สร้างไฟล์ ajax สำหรับดึงข้อมูล department name และ officer name

จากตาราง tbl_department และ tbl_officer ตามลำดับ

ไฟล์ gDepartment.php

<?php
header("Content-type:text/html; charset=UTF-8");        
header("Cache-Control: no-store, no-cache, must-revalidate");       
header("Cache-Control: post-check=0, pre-check=0", false);     
// โค้ดไฟล์ dbconnect.php ดูได้ที่ http://niik.in/que_2398_5642
require_once('inc/dbconnect.php');
if(isset($_GET['q']) ){
    $q = urldecode($_GET["q"]);
    $q = $mysqli->real_escape_string($q);
     
    $pagesize = 50; // จำนวนรายการที่ต้องการแสดง
	$table_db="tbl_department"; // ตารางที่ต้องการค้นหา
	$find_field="tbl_department_name"; // ฟิลที่ต้องการค้นหา
    $sql = "
	SELECT 
	tbl_department_id,
	tbl_department_name
	FROM $table_db  WHERE LOCATE('$q', $find_field) > 0 
	ORDER BY  LOCATE('$q', $find_field), $find_field LIMIT $pagesize
    ";
    $result = $mysqli->query($sql);
    if($result && $result->num_rows>0){
        while($row = $result->fetch_assoc()){
            // กำหนดฟิลด์ที่ต้องการส่ง่กลับ ปกติจะใช้ primary key ของ ตารางนั้น
            $id = $row["tbl_department_id"]; // 
             
            // จัดการกับค่า ที่ต้องการแสดง 
            $name = trim($row["tbl_department_name"]);// ตัดช่องวางหน้าหลัง
            $name = addslashes($name); // ป้องกันรายการที่ ' ไม่ให้แสดง error
            $name = htmlspecialchars($name); // ป้องกันอักขระพิเศษ
 
            // กำหนดรูปแบบข้อความที่แใดงใน li ลิสรายการตัวเลือก
            $display_name = preg_replace("/(" .$q. ")/i", "<b>$1</b>", $name);
            echo "
                <li onselect="this.setText('$name').setValue('$id')">
                    $display_name
                </li>
            ";  
        }
    }
    $mysqli->close();
}
?>

ไฟล์ gOfficer.php

<?php
header("Content-type:text/html; charset=UTF-8");        
header("Cache-Control: no-store, no-cache, must-revalidate");       
header("Cache-Control: post-check=0, pre-check=0", false);     
// โค้ดไฟล์ dbconnect.php ดูได้ที่ http://niik.in/que_2398_5642
require_once('inc/dbconnect.php');
if(isset($_GET['q']) ){
    $q = urldecode($_GET["q"]);
    $q = $mysqli->real_escape_string($q);
	$more_sql = "";
	if(isset($_GET['departmentID']) && $_GET['departmentID']!=""){
		$more_sql = " AND  tbl_department_id='".$_GET['departmentID']."' ";
	}     
    $pagesize = 50; // จำนวนรายการที่ต้องการแสดง
	$table_db="tbl_officer"; // ตารางที่ต้องการค้นหา
	$find_field="tbl_officer_name"; // ฟิลที่ต้องการค้นหา
    $sql = "
	SELECT 
	tbl_officer_id,
	tbl_officer_name
	FROM $table_db  WHERE LOCATE('$q', $find_field) > 0 
	$more_sql
	ORDER BY  LOCATE('$q', $find_field), $find_field LIMIT $pagesize
    ";
    $result = $mysqli->query($sql);
    if($result && $result->num_rows>0){
        while($row = $result->fetch_assoc()){
            // กำหนดฟิลด์ที่ต้องการส่ง่กลับ ปกติจะใช้ primary key ของ ตารางนั้น
            $id = $row["tbl_officer_id"]; // 
             
            // จัดการกับค่า ที่ต้องการแสดง 
            $name = trim($row["tbl_officer_name"]);// ตัดช่องวางหน้าหลัง
            $name = addslashes($name); // ป้องกันรายการที่ ' ไม่ให้แสดง error
            $name = htmlspecialchars($name); // ป้องกันอักขระพิเศษ
 
            // กำหนดรูปแบบข้อความที่แใดงใน li ลิสรายการตัวเลือก
            $display_name = preg_replace("/(" .$q. ")/i", "<b>$1</b>", $name);
            echo "
                <li onselect="this.setText('$name').setValue('$id')">
                    $display_name
                </li>
            ";  
        }
    }
    $mysqli->close();
}
?>

ไฟล์ gOfficer.php จะมีเงื่อนไข รองรับ กรณีมีการส่งค่า $_GET['departmentID']) มาด้วย ดูตัวอย่างได้ที่ Demo 1

DEMO 1

กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ

เนื้อหาที่เกี่ยวข้อง

กำลังอ่านเนื้อหานี้อยู่

05 Jul
2009

สร้างฟังก์ชัน autocomplete ให้ใช้งานแบบง่าย ด้วย ajax อ่าน 81,813
ตัวอย่าง function make_autocom(autoObj,showObj){ v
12 Aug
2014

ประยุกต์ ใช้งาน autocomplete กับ select ข้อมูล สองตาราง อ่าน 15,498
ตัวอย่าง โค้ดต่อไปนี้ เป็นการประยุกต์ การใช้งาน autocomplete ในการ เรียกข้อมู

URL สำหรับอ้างอิง

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน