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

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

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

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

Addy 10-10-2019 11:03:38

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

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

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

Pass

Code
เปลี่ยน

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

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

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

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

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

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

ความคิดเห็นที่ 1

หรือถ้าเป็น listbox ส่งค่าหา Autocomplete หละครับทำอบ่างไร กลับกันกับตัวอย่าง

addy 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 10-10-2019

ความคิดเห็นที่ 3

ไม่ใช่แบบนั่นครับ คือผมอยากสร้าง Autocomplete 2 ตัว จากตัวอย่างจะเป็น ส่งค่าจาก Autocomplete ไปยัง listbox แต่อยากได้ให้ Autocomplete ส่งค่าไปยังอีกตัว คือ พอเลือก Department Name แล้วใน Office Name ก็ให้เป็น Autocomplete เหมือนกันครับ

addy 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 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 15-10-2019

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

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

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