ขอคำแนะนำเรื่อง 2 input Autocomplete(2 database) ใน 1 Form

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา ขอคำแนะนำเรื่อง 2 input Autocomplete(2 database) ใน 1 Form

ขอคำแนะนำเรื่อง 2 input Autocomplete(2 database) ใน 1 Form

ผมต้องการต่อยอดจาก forum สร้างฟังก์ชัน autocomplete ให้ใช้งานแบบง่าย ด้วย ajax จึงอยากถามผู้รู้ว่าใครพอมี Code หรือแนะนำวิธีการทำให้ใน 1 Form มี 2 input ที่ทำ autocomplete ได้ และแต่ละ input มีการ query ต่าง database กัน รบกวนด้วยนะครับ

ขอบคุณครับ

Pontiac 202.69.137.xxx 29-10-2010 20:32:44

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

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

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

Pass

Code
เปลี่ยน

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

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

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

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

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

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

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

ตามตัวอย่างในหัวข้อ
http://www.ninenik.com/สร้างฟังก์ชัน_autocomplete_ให้ใช้งานแบบง่าย_ด้วย_ajax-209.html

เราจะเพิ่ม autocomplete ไปกี่อันก็ได้ เพียงแค่เพิ่มบรรทัด
make_autocom("show_arti_topic","h_arti_id");
ไปตามจำนวนที่ต้องการ แต่ต้องกำหนด parameter ตามฟอร์มที่เรากำหนด เช่น มี 2 อันก็เพิ่มเป็น
make_autocom("show_arti_topic","h_arti_id");
make_autocom("show_data","h_data_id");

ส่วนการ query เงื่อนไข ต่าง database เราก็เพิ่มตัวแปรเข้าไป ใน return เช่น
return "gdata.php?q=" +encodeURIComponent(this.value)+"&type=1";
หรือ
return "gdata.php?q=" +encodeURIComponent(this.value)+"&type=2";

หรือจะเพิ่ม argument ให้ function เป็นแบบนี้แทน

<script type="text/javascript">
function make_autocom(autoObj,showObj,url){
	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 url+"?q=" +encodeURIComponent(this.value);
    });	
}	
 
// การใช้งาน
// make_autocom(" id ของ input ตัวที่ต้องการกำหนด "," id ของ input ตัวที่ต้องการรับค่า");
make_autocom("show_arti_topic","h_arti_id","gdata.php");
make_autocom("show_arti_topic2","h_arti2_id","gdata2.php");
</script>

ก็สามารถทำได้เหมือนกัน

Ninenik 124.122.122.xxx 29-10-2010

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

สุดยอดเลยครับ ขอบคุณมากๆ เลย คุณ ninenik เทพจริงๆ อ่าน code ได้ขาดมากๆ

ผมมีอีกเรื่องหนึ่งจะถามเพิ่มเติมครับ บน text box autocomplete ที่เป็นเครื่องหมายแว่นขยายหนะครับ ถ้าผมใส่ปุ่ม Reset Form ไปภายใน Form

แล้วถ้าผมมีการเลือก ค่าใน text box autocomplete แล้ว ตรงปุ่มแว่นขยายจะกลายเป็น กากบาท ซึ่งเมื่อผมทำการกดปุ่ม Reset Form ไป เครื่องหมายนี้ก็ยังไม่เปลี่ยนแต่่ คำที่เลือกใน text box autocomplete หายไปพอกด submit ส่งค่าแบบ get ปรากฎว่ามีค่าจาก text box autocomplete ส่งค่าไปหา action page ด้วย ถ้าเป็นแบบนี้จะแก้ยังไงครับ

pontiac 61.90.9.xxx 29-10-2010 22:27

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

ของผมมัน ภาษาไทยเพี้ยนอ่ะครับ 

<?php
include "connect_db.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);  
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

     

<? 
$q = urldecode($_GET["q"]);
$pagesize = 5; // จำนวนรายการที่ต้องการแสดง
$table_db="member"; // ตารางที่ต้องการค้นหา
$find_field="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[0]; // ฟิลที่ต้องการส่งค่ากลับ
	$name = ucwords( strtolower( $row[2] ) ); // ฟิลที่ต้องการแสดงค่า
	// ป้องกันเครื่องหมาย '
	$name = str_replace("'","'",$name);
	//echo $name;
	// กำหนดตัวหนาให้กับคำที่มีการพิมพ์
	$display_name = preg_replace("/(".$q.")/i","<b>$1</b>",$name);
	//$name = iconv('TIS-620', 'UTF-8', $name);
	echo "<li onselect="this.setText('$name').setValue('$id');">$display_name</li>";
}
mysql_close();
?>

</body>
</html>

netnarok 124.122.154.xxx 01-10-2011 09:51

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

คุณ ninenik ครับ

ถ้าในไฟล์ gdata.php จากเดิมค่าที่ส่งกลับคือ $id กับ $name แล้วถ้าผมต้องการให้ส่งค่ากลับมามากกว่าสองค่าละครับจะต้องเขีบนโค้ดเพิ่มตรงไหนบ้างครับ

Thapakorn Attasiri 202.28.38.xxx 12-06-2012 19:32

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

มากกว่า 2 ทำได้ค่ะ

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

<?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('../Connections/conndb.php');
 
$q = urldecode($_GET["q"]);
$pagesize = 50; // จำนวนรายการที่ต้องการแสดง
$table_db="customer"; // ตารางที่ต้องการค้นหา
$find_field="cname"; // ฟิลที่ต้องการค้นหา
$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["cid"]; // ฟิลที่ต้องการส่งค่ากลับ
	$caddress = $row["caddress"]; // ฟิลที่ต้องการส่งค่ากลับ
	$name = ucwords( strtolower( $row["cname"] ) ); // ฟิลที่ต้องการแสดงค่า
	// ป้องกันเครื่องหมาย '
	$name = str_replace("'", "'", $name);
	// กำหนดตัวหนาให้กับคำที่มีการพิมพ์
	$display_name = preg_replace("/(" . $q . ")/i", "<b>$1</b>", $name);
	echo "<li onselect="this.setText('$name').setValue('$id','$caddress');">$display_name</li>";
}
mysql_close();
?>

แต่พอมากกว่านี้มันขึ้นตัว Autocomplete แต่ไม่มีค่าดังกล่าวมาด้วย

<script type="text/javascript">  
function make_autocom(autoObj,showObj,showObj2,showObj3,showObj4){ 
    var mkAutoObj=autoObj;   
    var mkSerValObj=showObj;
	var mkSerValObj2=showObj2;
	var mkSerValObj3=showObj3;
	var mkSerValObj4=showObj4;
	
    new Autocomplete(mkAutoObj, function() {  
        this.setValue = function(id,cusAddress,cusType,cusTaxId) {		
			document.getElementById(mkSerValObj).value = id;
			document.getElementById(mkSerValObj2).value = cusAddress; 
			document.getElementById(mkSerValObj3).value = cusType; 
			document.getElementById(mkSerValObj4).value = cusTaxId; 
						
        }  
        if ( this.isModified )  
            this.setValue("");  
        if ( this.value.length < 1 && this.isNotClick )   
            return ;      
        return "autocomplete/autocomplete.php?q=" +encodeURIComponent(this.value);  
    });   
}     
   
// การใช้งาน  
// make_autocom(" id ของ input ตัวที่ต้องการกำหนด "," id ของ input ตัวที่ต้องการรับค่า");  
make_autocom("cusName","cusID","cusAddress","cusAddress","cusType","cusTaxId");
</script>

<?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('../Connections/conndb.php');
 
$q = urldecode($_GET["q"]);
$pagesize = 50; // จำนวนรายการที่ต้องการแสดง
$table_db="customer"; // ตารางที่ต้องการค้นหา
$find_field="cusName"; // ฟิลที่ต้องการค้นหา
$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["cusID"]; // ฟิลที่ต้องการส่งค่ากลับ
	$cusAddress = $row["cusAddress"]; // ฟิลที่ต้องการส่งค่ากลับ
	$cusAddress = $row["cusAddress"]; // ฟิลที่ต้องการส่งค่ากลับ
	$cusType = $row["cusType"]; // ฟิลที่ต้องการส่งค่ากลับ
	$cusTaxId = $row["cusTaxId"]; // ฟิลที่ต้องการส่งค่ากลับ
	$name = ucwords( strtolower( $row["cusName"] ) ); // ฟิลที่ต้องการแสดงค่า
	// ป้องกันเครื่องหมาย '
	$name = str_replace("'", "'", $name);
	// กำหนดตัวหนาให้กับคำที่มีการพิมพ์
	$display_name = preg_replace("/(" . $q . ")/i", "<b>$1</b>", $name);
	echo "<li onselect="this.setText('$name').setValue('$id','$cusAddress','$cusType','$cusTaxId);">$display_name</li>";
}
mysql_close();
?>

saranya2532 223.204.255.xxx 04-10-2014 13:15

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

พอจะมีวิธีไม๊ค่ะ ที่จะทำได้ตามที่ถามด้านล่าง

saranya2532 223.204.255.xxx 06-10-2014 14:09

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

เหมืนอจะมีคนถามไว้ ลองดูความเห็น จากกระทู้นี้เป็นแนวทาง

http://www.ninenik.com/forum_view_824_1.html

ninenik 124.120.98.xxx 06-10-2014

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

ค่าที่ต้องการ alert ออกมาได้ค่ะ แล้วถ้าจะนำค่าตรงนี้ไปใส่ใน input text ล่ะค่ะ

saranya2532 223.204.255.xxx 06-10-2014 17:18

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

ได้แล้วค่ะ ใช้ document.all.cusAddress.value = cusAddress แทนการ alert

saranya2532 223.204.255.xxx 06-10-2014 17:30

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

ก๋ปนะบุต์ธรรมดาไม่ใช่หรอ

<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;
		}
		this.myfunction = function(data1,data2,data3){ // ที่เพิ่มเข้ามา
			alert(data1+"  "+data2+" "+data3);  // ที่เพิ่มเข้ามา
            document.getElementById('ddd').value = data1;
            document.getElementById('ddd').value = data2;
            document.getElementById('dddd').value = data3;
		}  // ที่เพิ่มเข้ามา
		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_arti_topic","h_arti_id");
</script>

ninenik 124.120.98.xxx 06-10-2014

1 2 Next

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

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

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