Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,027

HOME > PHP > PHP Forum > เลื่อก auto complete แล้วให้ select box โชว์ข้อมูลภายใต้เงือนไขของ auto complete

เลื่อก auto complete แล้วให้ select box โชว์ข้อมูลภายใต้เงือนไขของ auto complete

เริ่มหัวข้อใหม่

Keng_ds

โพสกระทู้ ( 178 )
บทความ ( 0 )

เลื่อก auto complete แล้วให้ select box โชว์ข้อมูลภายใต้เงือนไขของ auto complete

จากตัวอย่าง
รูปประกอบ

Code (PHP)

<form method="post" name="search_document" action="index.php?page=4">
   	  <table class="table_600px">
          <tr>
                <td width="150" height="50" align="right" valign="middle"><font class="font_search">ชื่อเอกสาร :: </font></td>
            <td align="left" valign="middle"><input name="document_name_file" type="text" class="textbox_other" id="document_name_file" value="<?=$_POST["document_name_file"];?>" size="40" autocomplete="off"/><input name="document_id" type="hidden" class="textbox_other" id="document_id" value="<?=$_POST["document_id"];?>" readonly="readonly" />&nbsp;&nbsp;</td>
        </tr>
        <tr>
                <td height="0" align="right" valign="middle"><font class="font_search">คีย์เวิร์ด ::</font></td>
                <td align="left">
                	<select name="keyword_name" id="keyword_name" class="textbox_other">
                        
                    </select>
                </td>
        </tr>
         <tr>
                <td height="50" colspan="2" align="center" valign="middle"><input type="submit" value="  .. ค้นหา ..  " class="widget-button rounded" onclick="return check_search_document();" /></td>
         </tr>
      </table>
</form>

<script type="text/javascript" src="js/autocomplete.js"></script>
<script type="text/javascript">


function view_document(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 ;	
		return "auto_search_document_show.php?q=" +encodeURIComponent(this.value);
    });	
}
function view_keyword(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 ;	
		return "auto_search_keyword_public.php?q=" +encodeURIComponent(this.value);
    });	
}
view_document("document_name_file","document_id");
view_keyword("keyword_name","keyword_id");

</script>

พอมีใครเคยทำหรือโค้ดพอเป็นแนวทางให้บ้างไหมเอ่ย ขอบคุณครับ

Tag : PHP

Date : 2013-01-07 11:59:52

By : keng_ds

View : 1276

Reply : 4

No. 1

Keng_ds

โพสกระทู้ ( 178 )
บทความ ( 0 )

รอ........ผู้รู้ช่วยที

Date : 2013-01-07 17:12:59

By : keng_ds

No. 2

TC Admin

โพสกระทู้ ( 74,058 )
บทความ ( 838 )

หลักการคล้าย ๆ กับ Dependant List menu ครับ ขึ้นอยู่จะ Apply แบบไหน ลองค้นหาในกระทู้บทความเก่า ๆ ได้ครับ มีทั้ง JavaScript และ jQuery

Date : 2013-01-07 17:15:52

By : mr.win

No. 3

Crazyt[e]Am

โพสกระทู้ ( 889 )
บทความ ( 11 )

Default.html
Code (PHP)

<!DOCTYPE html>
<html>
<head>
	<title>::&nbsp;jQuery&nbsp;Auto&nbsp;Suggession&nbsp;::</title>
	<meta charset="UTF-8" />
	<!-- CSS style -->
	<link href="style.css" rel="stylesheet" type="text/css">
	<!-- jQuery libs -->
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>

<body>

<form name="Myfrm" id="Myfrm" autocomplete=off>
	<label>Name:</label>
	<input type="text" name="txt_name" id="txt_name" onblur="setTimeout('txt_Out();', 200);" /><br />
	<div id="result"></div>
<!--
<label>ID:</label>
	<input type="text" name="txt_id" id="txt_id" />
-->
	
</form>
<!-- Javascript -->
<script type="text/javascript">
$(document).ready(function(){
	$('#result').hide();
	$('#txt_name').keyup(function(){
		var txt_name = $('#txt_name').val();
		if(txt_name != ""){
			$.get('server.php', {qrstr:txt_name}, function(data){
		/* Check return data from databases */	
			if(data != ""){
				$('#result').show().html(data);
			}else{
				$('#txt_id').val('');
				$('#result').hide().html('');
			}
			
		});
		return false;
	}else{
		$('#txt_id').val('');
		$('#result').hide().html('');
	}
		
	});
});
/* End */


/* Onblur txt_name */
function txt_Out(){
	$('#result').hide().html('');
}

/* Onclick div#link */
function Add_ID(id, name){
	$('#txt_name').val(name);
	//$('#txt_id').val(id);
	$('#result').hide().html('');
}
</script>
</body>
</html>

server.php
Code (PHP)

<?php
/* Fix request sometime don't dupicate */
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);   

/* Connect to databases */
$link = mysql_connect("localhost", "root", "1234") or die (mysql_error());
$sel_db = mysql_select_db("student", $link);

/* Select data from table */
$sql = "SELECT * FROM tb_data WHERE Name LIKE '".$_GET["qrstr"]."%'";
$qr = mysql_query($sql);
$rows = mysql_num_rows($qr);
	while($fetch = mysql_fetch_assoc($qr)){
	echo "<div id=\"link\" onclick=\"Add_ID('".$fetch["id"]."', '".$fetch["name"]."');\">&nbsp;".$fetch["name"]."</div>";
}

/* Close connect databases */
mysql_close($link);
?>

style.css
Code

body{font-family:Arial; font-size:12px;text-align:center;}
label{display:inline-block;width:100px; text-align:right; font-weight:bold; color:#F00;}

div#result{
	text-align:left;
	margin-top:3px;
	border:solid 1px #CCC;
	width:450px;
	background-color:#FFF;
	position:absolute; left:510px;
}

div#link{width:100%;}
div#link:hover{background-color:#1E90FF;cursor:pointer; text-decoration:underline; color:#FFF;}
input{margin-top:3px;}
input#txt_name{width:350px;border:solid 1px #CCC;text-transform:uppercase;}
input#txt_name:focus{border:solid 1px #1E90FF;}

เอาไปประยุกต์ดูนะครับ

ปรึกษา php+MySQL ฟรีจร้า
koromankung[at]gmail.com

Date : 2013-01-07 17:21:40

By : popnakub

No. 4

Keng_ds

โพสกระทู้ ( 178 )
บทความ ( 0 )

ขอบคุณครับ

Date : 2013-01-08 09:06:51

By : keng_ds

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : เลื่อก auto complete แล้วให้ select box โชว์ข้อมูลภายใต้เงือนไขของ auto complete

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก