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

เขียนเมื่อ 13 ปีก่อน โดย Ninenik Narkdee
autocomplete php ajax

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





ตัวอย่าง

ไฟล์ที่จำเป็นต้องใช้
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




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







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



Tags:: ajax autocomplete php







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












สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Privacy Policy
Author
2023 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ