รบกวนสอบถามค่ะ เรื่อง auto complete ได้ลองเอาไปใช้ใน modal แล้วรูปแว่นขยายไม่ขึ้น แตไปอยู่ตรงข้างหลัง modal แทน

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา รบกวนสอบถามค่ะ เรื่อง auto complete ได้ลองเอาไปใช้ใน modal แล้วรูปแว่นขยายไม่ขึ้น แตไปอยู่ตรงข้างหลัง modal แทน

รบกวนสอบถามค่ะ เรื่อง auto complete ได้ลองเอาไปใช้ใน modal แล้วรูปแว่นขยายไม่ขึ้น แตไปอยู่ตรงข้างหลัง modal แทน 
<link rel="stylesheet" href="autocomplete/autocomplete.css"  type="text/css"/> 
<script type="text/javascript" src="autocomplete/autocomplete.js"></script>  
<div class="modal fade" id="modal-add">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<h4 class="modal-title">ลงทะเบียนผลการเรียน</h4>
			</div>
			<div class="modal-body">
				<div class="container-fluid">
			<form action="" method="POST" role="form" name="frmMain_admin">
				<table class="table table-hover" id="tb_admin">
					<thead>
                        <tr>
                            <th><center>รหัสวิชา</center></th>
                            <th><center>ชื่อวิชา</center></th>
                            <th><center>หมู่เรียน</center></th>
                            <th><center>หน่วยกิต</center></th>
                            <th>ภาคเรียน</th>
                            <th><center>ปีการศึกษา</center></th>
                            <th><center>เกรด</center></th>
                        </tr>
                    </thead>
					<tbody>
						<tr>
							<td><center><input type="text" name="subject_code" id="subject_code" placeholder="(01204495)" class="form-control input_subject"  maxlength="8"></center></td>
							<td><center><input type="text" name="subject_name" id="subject_name" placeholder="(ภาษาไทยเพื่อการสื่อสาร)" class="form-control input_namesub" disabled></center></td>
							<td>
							<center><select name="" id="input" class="form-control input_sec">
								<option value="">700</option>
								<option value="">841</option>
							</select></center>
							</td>
							<td>
							<center><input type="text" name="subject_credit" id="subject_credit" class="form-control input_credit" disabled></center>
							</td>
							<td>
							<center><select name="" id="input" class="form-control input_seme">
								<option value="">ต้น</option>
								<option value="">ปลาย</option>
								<option value="">ซัมเมอร์</option>
							</select></center>
							</td>
							<td>
							<center><select name="" id="input" class="form-control input_years">
								<option value="">2550</option>
								<option value="">2551</option>
								<option value="">2552</option>
								<option value="">2553</option>
								<option value="">2554</option>
								<option value="">2555</option>
								<option value="">2556</option>
								<option value="">2557</option>
								<option value="">2558</option>
								<option value="">2559</option>
								<option value="">2560</option>
							</select></center>
							</td>
							<td>
							<center><select name="" id="input" class="form-control input_grade">
								<option value="">A</option>
								<option value="">B+</option>
								<option value="">B</option>
								<option value="">C+</option>
								<option value="">C</option>
								<option value="">D+</option>
								<option value="">D</option>
								<option value="">F</option>
								<option value="">W</option>
							</select></center>
							</td>
						
							<td><input type="hidden" name="hdnMaxLine_admin" value="0"></td>
						</tr>
					</tbody>
				</table>
					
					<button class="btn btn-success glyphicon glyphicon-plus btn-xs" name="btnAdd" type="button" id="btnAdd" value="+" onClick="CreateNewRow();" data-toggle="tooltip" title="เพิ่ม"></button>
					<button class="btn btn-danger glyphicon glyphicon-minus btn-xs " name="btnDel" type="button" id="btnDel" value="-" onClick="RemoveRow();" data-toggle="tooltip" title="ลบ"></button>

				
					<br>
				<center><div class="container-fluid btncenter">
					<button type="submit" class="btn btn-primary glyphicon glyphicon-floppy-disk btn-sm " data-toggle="tooltip" title="บันทึก">บันทึก</button>
					<button type="reset" class="btn btn-warning glyphicon glyphicon-erase  btn-sm" data-toggle="tooltip" title="ล้างข้อมูล">ล้างข้อมูล</button>
					<button type="submit" class="btn btn-danger glyphicon glyphicon-remove btn-sm" data-toggle="tooltip" title="ยกเลิก">ยกเลิก</button>	
				</div></center>
			</form>
			</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
$(function(){
	
});
</script>
<script type="text/javascript">  
function make_autocom(autoObj,showObj,showCre){  
    var mkAutoObj=autoObj;   
    var mkSerValObj=showObj; 
    var mkSerValObj2=showCre;    
    new Autocomplete(mkAutoObj, function() {  
          this.setValue1 = function(id) {        
              document.getElementById(mkSerValObj).value = id;  
			 // $.post("get_officer.php",{departmentID:id},function(data){
			 // 	$("#officer_id").html(data);
			 // });
          }
          this.setValue2 = function(id2){
            document.getElementById(mkSerValObj2).value = id2;  
            // alert(data1);
          }  
        if ( this.isModified )  
            this.setValue1("");    
        if ( this.value.length < 1 && this.isNotClick )   
            return ;      
        return "index.php?p=autofill&q=" +encodeURIComponent(this.value);  
    });   
}     
   
// การใช้งาน  
// make_autocom(" id ของ input ตัวที่ต้องการกำหนด "," id ของ input ตัวที่ต้องการรับค่า");  
make_autocom("subject_code","subject_name","subject_credit");  
</script> 

<!-- END MODEL -->

</script>

จากรูป พิมพ์ข้อมูลลงไปแต่แว่นขยายไม่ขึ้นค่ะ

พอปิดpop up ของหน้าลงทะเบียน จะเห็นว่ามาขึ้นข้างหลังแทนค่ะ


Poopeaw 180.183.80.xxx 11-05-2016 22:14:27

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

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


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


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

 ความคิดเห็นที่ 1
ถ้้าอยู่ในลักษณะที่เป็นด้านหลังแบบตรงกัน แนวๆ ซ้อนอยู่ด้านบน ให้ลองใช้การกำหนด css style ค่า
postion กับ  z-index ให้เป็นค่าสูงๆ ดู 
หรือไม่ก็ซ่อน ไอคอน แว่นขยายไปเลย โดยแก้ใน css class ชื่อ autocomplete_icon ในไฟล์ autocomplete.css
กำหนด css style ให้ display:none;


ninenik 122.155.42.xxx 11-05-2016
 ความคิดเห็นที่ 2

ขอบคุณค่ะ สามารถซ่อนแว่นขยายได้แล้ว ขอสอบถามอีกนิดหนึ่งค่ะ คือ จะ return ให้ถูกลิ้งยังไงค่ะ เหมือนที่ข้อมูลไม่ขึ้นเพราะ return ค่าผิด
 

ลิ้งหน้าที่ใช้อยู่ -->   index.php?p=add_subject&sid=1 (?p เก็บ .php เอามาต่อกับ add_subject อยู่)

คือจะเอามาต่อกับ-->  "autofill.php?q=" +encodeURIComponent(this.value);




ตอนนี้ขึ้นอย่างนี้ค่ะ



poopeaw 180.183.85.xxx 12-05-2016 01:01
 ความคิดเห็นที่ 3
 ที่ถามเพิ่ม ไม่เข้าใจน่ะ


ninenik 180.183.14.xxx 12-05-2016
 ความคิดเห็นที่ 4
คือ ได้ลองทำ autocomplete  (ตามบทความ ประยุกต์ การใช้งาน autocomplete ในการ เรียกข้อมูลจากฐานข้อมูล สองตาราง ของ คุณ )    สามารถดึงข้อมูลออกได้อย่างถูกต้อง 

ทีนี่ ได้ปรับเปลี่ยนโค๊ด มารวมกับโปรแกรมที่ทำ พอใส่ข้อมูลลงในช่องปรากฏว่า ไม่มีข้อมูลออกมาค่ะ เลยไม่รู้ว่าสาเหตุเป็นเพราะ ส่งค่า return กลับมาไม่ถูกรึเปล่า
เพราะ หน้าที่ลองทำตามบทความ ใช้ลิ้งหน้า return "gDepartment.php?q=" +encodeURIComponent(this.value);  สามารถดึงข้อมูลได้  

แต่ในโปรแกรมของหนู ต้องใช้ ลิ้งหน้านี  index.php?p=add_subject&sid=1 รวมกับ autofill.php  ซึ่งตอนนี้ที่ใช้  return "autofill.php&q=" +encodeURIComponent(this.value);  แต่ข้อมูลไม่ออกมา 

เลยคิดว่าเป็นเพราะ return ไปไม่ถูกรึเปล่า แล้วพอจะมีวิธีใส่ ลิ้งให้ถูก ตรง return มั้ยค่ะ ขอบคุณค่ะ

(ถ้ายังอธิบายงงๆอยู่ต้องขอโทษจริงๆค่ะ )

<!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> </title>
<!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> -->

<script type="text/javascript" src="autocomplete/autocomplete.js"></script>  
<link rel="stylesheet" href="autocomplete/autocomplete.css"  type="text/css"/>  

<!-- <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> -->
</head>

<body>




<form action="" method="POST" role="form" name="frmMain_admin">
                <table class="table table-hover" id="tb_admin">
                    <thead>
                        <tr>
                            <th><center>รหัสวิชา</center></th>
                            <th><center>ชื่อวิชา</center></th>
                            <th><center>หมู่เรียน</center></th>
                            <th><center>หน่วยกิต</center></th>
                            <th>ภาคเรียน</th>
                            <th><center>ปีการศึกษา</center></th>
                            <th><center>เกรด</center></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><center><input type="text" name="subject_code" id="subject_code" placeholder="(01204495)" class="form-control input_subject"  maxlength="8"></center></td>
                            <td><center><input type="text" name="subject_name" id="subject_name" placeholder="(ภาษาไทยเพื่อการสื่อสาร)" class="form-control input_namesub" disabled></center></td>
                            <td>
                            <center><select name="" id="input" class="form-control input_sec">
                                <option value="">700</option>
                                <option value="">841</option>
                            </select></center>
                            </td>
                            <td>
                            <center><input type="text" name="subject_credit" id="subject_credit" class="form-control input_credit" disabled></center>
                            </td>
                            <td>
                            <center><select name="" id="input" class="form-control input_seme">
                                <option value="">ต้น</option>
                                <option value="">ปลาย</option>
                                <option value="">ซัมเมอร์</option>
                            </select></center>
                            </td>
                            <td>
                            <center><select name="" id="input" class="form-control input_years">
                                <option value="">2550</option>
                                <option value="">2551</option>
                                <option value="">2552</option>
                                <option value="">2553</option>
                                <option value="">2554</option>
                                <option value="">2555</option>
                                <option value="">2556</option>
                                <option value="">2557</option>
                                <option value="">2558</option>
                                <option value="">2559</option>
                                <option value="">2560</option>
                            </select></center>
                            </td>
                            <td>
                            <center><select name="" id="input" class="form-control input_grade">
                                <option value="">A</option>
                                <option value="">B+</option>
                                <option value="">B</option>
                                <option value="">C+</option>
                                <option value="">C</option>
                                <option value="">D+</option>
                                <option value="">D</option>
                                <option value="">F</option>
                                <option value="">W</option>
                            </select></center>
                            </td>
                        
                            <td><input type="hidden" name="hdnMaxLine_admin" value="0"></td>
                        </tr>
                    </tbody>
                </table>
                 
            </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,showCre){  
    var mkAutoObj=autoObj;   
    var mkSerValObj=showObj; 
    var mkSerValObj2=showCre;    
    new Autocomplete(mkAutoObj, function() {  
          this.setValue1 = function(id) {        
              document.getElementById(mkSerValObj).value = id;  
			 // $.post("get_officer.php",{departmentID:id},function(data){
			 // 	$("#officer_id").html(data);
			 // });
          }
          this.setValue2 = function(id2){
            document.getElementById(mkSerValObj2).value = id2;  
            // alert(data1);
          }  
        if ( this.isModified )  
            this.setValue1("");    
        if ( this.value.length < 1 && this.isNotClick )   
            return ;      
        // return "gDepartment.php?q=" +encodeURIComponent(this.value);
        return "autofill.php&q=" +encodeURIComponent(this.value);
    });   
}     
   
// การใช้งาน  
// make_autocom(" id ของ input ตัวที่ต้องการกำหนด "," id ของ input ตัวที่ต้องการรับค่า");  
make_autocom("subject_code","subject_name","subject_credit");  
</script> 
</body>
</html>
  


poopeaw 180.183.162.xxx 13-05-2016 23:03
 ความคิดเห็นที่ 5
autofill.php&q. น่าจะเป็น autofill.php?q ไหม รูปแบบ ?a=1&b=2


ninenik 122.155.42.xxx 14-05-2016
 ความคิดเห็นที่ 6
ได้แล้วค่ะ ขอบคุณมากๆค่ะ


poopeaw 180.183.85.xxx 15-05-2016 22:44
 ความคิดเห็นที่ 7
z-index ตรง modal เป็น 1400
z-index ตรง autocomplete.css เป็น 1600


Thani Kul 27.254.220.xxx 22-08-2018 14:13
1







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