PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

ขอคำแนะนำเรื่อง 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 IP: 202.69.137.xxx วันที่: 29-10-2010 เวลา: 20:32:44

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

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


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


  • ( หรือ สามารถทำการ สมัครสมาชิก และล็อกอิน ด้วย ปุ่ม Log in with Facebook ด้านล่าง )
 ความคิดเห็นที่ 13
ขอถามนอกเรื่องหน่อยค่ะ พอดีเป็นมือใหม่ค่ะเคยทำแต่เว็บแบบเก่า พอมาปรับเป็น Responsive Design ก็งงหลายอย่างเลย คือเรื่องเมนูอ่ะค่ะจะทำให้มันแสดงต่างกันในสมาร์ทโฟทกับคอม แ่ตัวเมนูมันขึ้นบังข้อมูงหน้าเว็บหมดแล้วกดซ่อนไม่ได้อ่ะ เป็นสคริปที่โหลดมาอ่ะค่ะ
 
สคริปค่ะ
.menu-icon
                {
                    display: inline-block;
                    margin: 5px 0px 0px 10px;
                    padding: 0px 0px;
                    height: 30px;
                    background-color: #9c0121;
                    line-height: 30px;
                    text-align: center;
                    color: #FFF;
                    font-weight: bold;
                    border: #9c0121 2px solid;
                    cursor: pointer;
                    -webkit-touch-callout: none;
                    -webkit-user-select: none;
                    -khtml-user-select: none;
                    -moz-user-select: none;
                    -ms-user-select: none;
                    user-select: none;
                }

ตอนใช้
<div class="main-wrapper">
    <div class="sec-header mobile">
                <div class="menu-icon"><img src="images/Menu-Icon.jpg" border="0" alt="MENU"></div>
                <ul>
                    <li><a href="home.php">หน้าหลัก</a></li>
                    <li><a href="#">รหัสสินค้า</a></li>
                    <li><a href="#">รหัสสมาชิก</a></li>
                    <li><a href="#">สั่งซื้อสินค้า</a></li>
                    <li><a href="#">คอมมิชชั่น</a></li>
                    <li><a href="#">รายงาน</a></li>
                    <li><a href="#">เปลี่ยนรหัสผ่าน</a></li>
                    <li><a href="index.php?command=LOGOUT">ออกจากระบบ</a></li>
                </ul>
    </div>
            <div class="sec-header desktop">
              <tr>
                <td bgcolor="#019c7d"><div align="center">
                  <a href="home.php"><img src="images/home.jpg" alt="Home" name="home" width="120" height="35" border="0" id="Image1" onMouseOver="MM_swapImage('home','','images/home-select.jpg',1)" onMouseOut="MM_swapImgRestore()"></a>
                  <a href="products_code.php"><img src="images/products.jpg" alt="products" name="products" width="120" height="35" border="0" id="Image2" onMouseOver="MM_swapImage('products','','images/products-select.jpg',1)" onMouseOut="MM_swapImgRestore()"></a><a href="member_code.php"><img src="images/member.jpg" alt="member" name="member" width="120" height="35" border="0" id="member" onMouseOver="MM_swapImage('member','','images/member-select.jpg',1)" onMouseOut="MM_swapImgRestore()"></a><a href="order.php"><img src="images/order.jpg" alt="order" name="order" width="120" height="35" border="0" id="order" onMouseOver="MM_swapImage('order','','images/order-select.jpg',1)" onMouseOut="MM_swapImgRestore()"></a>
                  <a href="commission.php"><img src="images/commission.jpg" alt="commission" name="commission" width="120" height="35" border="0" id="commission" onMouseOver="MM_swapImage('commission','','images/commission-select.jpg',1)" onMouseOut="MM_swapImgRestore()"></a><a href="report.php"><img src="images/report.jpg" alt="report" name="report" width="120" height="35" border="0" id="report" onMouseOver="MM_swapImage('report','','images/report-select.jpg',1)" onMouseOut="MM_swapImgRestore()"></a>
                  <a href="repassword.php"><img src="images/password.jpg" alt="repass" name="repass" width="130" height="35" border="0" id="repass" onMouseOver="MM_swapImage('repass','','images/password-select.jpg',1)" onMouseOut="MM_swapImgRestore()"></a>
                  <a href="index.php?command=LOGOUT"><img src="images/logout.jpg" alt="logout" name="logout" width="130" height="35" border="0" id="logout" onMouseOver="MM_swapImage('logout','','images/logout-select.jpg',1)" onMouseOut="MM_swapImgRestore()"></a></div></td>
              </tr>
    </div>
</div>
</table>
<div align="center" class="font_normal" style="padding: 1em;">
  <div>
      <table id="Table_01" width="321" height="38" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td><a href="products_code.php?Action=NewPD"><img src="../Temp/images/AddProducts_01.jpg" alt="" name="NewPD" width="156" height="38" border="0" id="NewPD" onMouseOver="MM_swapImage('NewPD','','../Temp/images/AddProductsSelect_01.jpg',1)" onMouseOut="MM_swapImgRestore()"></a></td>
          <td><img src="../Temp/images/AddProducts_02.jpg" width="10" height="38" alt=""></td>
          <td><a href="products_code.php?Action=NewPS"><img src="../Temp/images/AddProducts_03.jpg" alt="" name="NewPS" width="155" height="38" border="0" id="NewPS" onMouseOver="MM_swapImage('NewPS','','../Temp/images/AddProductsSelect_03.jpg',1)" onMouseOut="MM_swapImgRestore()"></a></td>
        </tr>
      </table>
    </div>


โดย:  รญา พชรวรางค์กูล IP: 223.206.54.xxx วันที่: 29-10-2015 เวลา: 12:53:28
 ความคิดเห็นที่ 12
$("input") แบบนี้น่าจะผูกกับ textbox ทั้งหมด
ถ้าแยก ก็ลองใช้เป็น
 
$("input[name=xxxx]")  xxx ก็ชื่อของ textbox ที่ต้องการ มีหลายอันก็เปลี่ยนชื่อ
 
 $(function () {
$("input[name=xxxx1]").autocomplete({
 source: [pd_group]
 });
$("input[name=xxxx2]").autocomplete({
 source: [pd_group]
 });
 });


โดย:  Ninenik IP: 180.183.104.xxx วันที่: 29-10-2015
 ความคิดเห็นที่ 11
พอดีใช้ autocomplete ของอีกโค้ดนึงที่โหลดมาอ่ะค่ะ โค้ดตัวนี้

 <script type="text/javascript">
 var pd_group = [ 'หมวดเครื่องสำอาง' , 'หมวดอาหารเสริม'  , 'หมวดสื่อการสร้างธุรกิจ' , 'หมวดสินค้าพิเศษ'  ];
 $(function () {
 $("input").autocomplete({
 source: [pd_group]
 });
 });
 </script>

มันก็ใช้ได้ค่ะ แต่มันขึ้นทุก textbox ใบฟอร์มเลย จะแยกแต่ละ textbox ให้เป็นค่าของใครของมันยังไงดีคะ


โดย:  รญา พชรวรางค์กูล IP: 223.205.100.xxx วันที่: 29-10-2015 เวลา: 01:02:33
 ความคิดเห็นที่ 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 IP: 124.120.98.xxx วันที่: 06-10-2014
 ความคิดเห็นที่ 9
ได้แล้วค่ะ ใช้ document.all.cusAddress.value = cusAddress  แทนการ alert

โดย:  Saranya2532 IP: 223.204.255.xxx วันที่: 06-10-2014 เวลา: 17:30:31
 ความคิดเห็นที่ 8
ค่าที่ต้องการ alert ออกมาได้ค่ะ แล้วถ้าจะนำค่าตรงนี้ไปใส่ใน input text ล่ะค่ะ

โดย:  Saranya2532 IP: 223.204.255.xxx วันที่: 06-10-2014 เวลา: 17:18:58
 ความคิดเห็นที่ 7
เหมืนอจะมีคนถามไว้ ลองดูความเห็น จากกระทู้นี้เป็นแนวทาง

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

โดย:  Ninenik IP: 124.120.98.xxx วันที่: 06-10-2014
 ความคิดเห็นที่ 6
  พอจะมีวิธีไม๊ค่ะ  ที่จะทำได้ตามที่ถามด้านล่าง

โดย:  Saranya2532 IP: 223.204.255.xxx วันที่: 06-10-2014 เวลา: 14:09:42
 ความคิดเห็นที่ 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 IP: 223.204.255.xxx วันที่: 04-10-2014 เวลา: 13:15:32
 ความคิดเห็นที่ 4

 คุณ ninenik ครับ

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



โดย:  Thapakorn Attasiri IP: 202.28.38.xxx วันที่: 12-06-2012 เวลา: 19:32:30
 ความคิดเห็นที่ 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 IP: 124.122.154.xxx วันที่: 01-10-2011 เวลา: 09:51:44
 ความคิดเห็นที่ 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 IP: 61.90.9.xxx วันที่: 29-10-2010 เวลา: 22:27:27
 ความคิดเห็นที่ 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 IP: 124.122.122.xxx วันที่: 29-10-2010