Autocomplete จะส่งค่าหา Autocomplete อีกตัวได้อย่างไรครับ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา Autocomplete จะส่งค่าหา Autocomplete อีกตัวได้อย่างไรครับ

Autocomplete จะส่งค่าหา Autocomplete อีกตัวได้อย่างไรครับ
ตามตัวอย่าง ถ้าเป็นการส่งค่า Autocomplete หากันจะทำได้อยา่งไรครับ
https://www.ninenik.com/ประยุกต์_ใช้งาน_autocomplete_กับ_select_ข้อมูล_สองตาราง-516.html


Addy 49.231.190.xxx 10-10-2019 11:03:38

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

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


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


  • ( หรือ เข้าใช้งานด้วย Facebook คลิก )
 ความคิดเห็นที่ 1
หรือถ้าเป็น listbox ส่งค่าหา Autocomplete หละครับทำอบ่างไร กลับกันกับตัวอย่าง


Addy 49.231.190.xxx 10-10-2019 15:59
 ความคิดเห็นที่ 2
ถ้าแค่รับค่า ก็ set value ให้กับ DOM ธรรมดา 
 
$("#departmentName").val("che");
 
แต่ถ้า รับค่า และทำการแสดงค่า ข้อมูลนั้นเลย ใช้โค้ดด้านล่าง ไม่ต้องกำหนดบรรทัดแรกก็ เรียกใช้การกดที่ icon สองครั้ง
ครั้งแรกรีเซ็ต และครั้งที่สองทำงาน
 
$(".autocomplete_icon").trigger("click");
$("#departmentName").val("che");
$(".autocomplete_icon").trigger("click");

ตัวอย่าง DEMO

Ninenik 171.97.98.xxx 10-10-2019
 ความคิดเห็นที่ 3
ไม่ใช่แบบนั่นครับ  คือผมอยากสร้าง Autocomplete 2  ตัว จากตัวอย่างจะเป็น ส่งค่าจาก Autocomplete ไปยัง listbox  แต่อยากได้ให้ Autocomplete ส่งค่าไปยังอีกตัว  คือ พอเลือก Department Name แล้วใน Office Name  ก็ให้เป็น Autocomplete เหมือนกันครับ


Addy 49.231.190.xxx 11-10-2019 09:08
 ความคิดเห็นที่ 4
คือ Department Name :  ส่งค่าไป office name แล้วให้ office name มีค่าเฉพาะ ที่ได้รับจาก Autocomplete   สมมุติเลือก  Department Name เป็น  Aerospace Engineers  แล้วใน office name มีคร่าแค่ Mr.AAAA และ Mr.BBBB  แต่อยากให้ ตรง office name เป็น Autocomplete ครับ


Addy 49.231.190.xxx 15-10-2019 08:56
 ความคิดเห็นที่ 5
ต้องทำความเข้าใจ ความสัมพันธ์ของข้อมูล และแนวทางการประยุกต์
ด้านล่าง เป็นแนวทาง ต่อยอดจากเนื้อหาบทความ http://niik.in/516
 
เหมือนโค้ดจะเป็น mysql ลองไปปรับเป็น mysqli และจัดการ โค้ดเพิ่มเติม ดู http://niik.in/209
 
<!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 สำหรับดึงข้อมูล officer name จากตาราง 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);       
// ส่วนติดต่อกับฐานข้อมูล
include("../../connect.php");
 
$q = urldecode($_GET["q"]);
$pagesize = 50; // จำนวนรายการที่ต้องการแสดง
$table_db="tbl_department"; // ตารางที่ต้องการค้นหา
$find_field="tbl_department_name"; // ฟิลที่ต้องการค้นหา
$sql = "SELECT *  FROM $table_db  WHERE LOCATE('$q', $find_field) > 0 
			ORDER BY  LOCATE('$q', $find_field), $find_field LIMIT $pagesize";
$results = mysql_query($sql);
while ($row = mysql_fetch_array( $results )) {
	$id = $row["tbl_department_id"]; // ฟิลที่ต้องการส่งค่ากลับ
	$name = ucwords( strtolower( $row["tbl_department_name"] ) ); // ฟิลที่ต้องการแสดงค่า
	// ป้องกันเครื่องหมาย '
	$name = str_replace("'", "'", $name);
	// กำหนดตัวหนาให้กับคำที่มีการพิมพ์
	$display_name = preg_replace("/(" . $q . ")/i", "<b>$1</b>", $name);
	echo "<li onselect="this.setText('$name').setValue('$id');">$display_name</li>";
}
mysql_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);       
// ส่วนติดต่อกับฐานข้อมูล
include("../../connect.php");
 
$q = urldecode($_GET["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 *  FROM $table_db  WHERE LOCATE('$q', $find_field) > 0 
			$more_sql
			ORDER BY  LOCATE('$q', $find_field), $find_field LIMIT $pagesize";
$results = mysql_query($sql);
while ($row = mysql_fetch_array( $results )) {
	$id = $row["tbl_officer_id"]; // ฟิลที่ต้องการส่งค่ากลับ
	$name = ucwords( strtolower( $row["tbl_officer_name"] ) ); // ฟิลที่ต้องการแสดงค่า
	// ป้องกันเครื่องหมาย '
	$name = str_replace("'", "'", $name);
	// กำหนดตัวหนาให้กับคำที่มีการพิมพ์
	$display_name = preg_replace("/(" . $q . ")/i", "<b>$1</b>", $name);
	echo "<li onselect="this.setText('$name').setValue('$id');">$display_name</li>";
}
mysql_close();
?>
 
 
ไฟล์ gOfficer.php จะมีเงื่อนไข รองรับ กรณีมีการส่งค่า $_GET['departmentID']) มาด้วย
 
 

ตัวอย่าง DEMO

Ninenik 171.97.98.xxx 15-10-2019
1






เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ