|
|
|
พิมพ์ข้อมูลลง Select List แล้วข้อมูลที่พิมพ์หรือข้อมูลใกล้เคียงจะโชว์ขึ้นมา [ช่วยด้วยครับ] |
|
|
|
|
|
|
|
น่าจะคล้าย ๆ Auto Complete หรือเปล่าครับ ในบทความมีอยู่ครับ ลองค้นหาดู
|
|
|
|
|
Date :
2013-01-09 11:37:28 |
By :
mr.win |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
default.php
Code (PHP)
<!DOCTYPE html>
<html>
<head>
<title>:: jQuery Auto Suggession ::</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 name FROM table WHERE name LIKE '".$_GET["qrstr"]."%'";
$Qr_Sql = mysql_query($Sql);
$rows = mysql_num_rows($Qr_Sql);
while($fetch = mysql_fetch_assoc($Qr_Sql)){
echo "<div id=\"link\" onclick=\"Add_ID('".$fetch["ID_Stu"]."', '".$fetch["Name"]."');\"> ".$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 ฟรีจร้า
|
ประวัติการแก้ไข 2013-01-09 14:28:30
|
|
|
|
Date :
2013-01-09 14:27:03 |
By :
popnakub |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ตามที่คุณ popjung ได้ให้คำแนะนำมาอะครับ
มันเป็นแบบของ Textbox นะครับ
แต่ที่ผมอยากได้ก็คือ
ผมได้ทำการ Select ข้อมูลมาใส่ไว้ใน SelectList แล้วนะครับ
แล้วเวลาเลือกข้อมูลใน SelectList ข้อมูลมันเยอะ
ก็เลยต้องการแบบว่า พิมพ์คำที่ต้องการ(บางส่วน)
แล้วให้ SelectList ไปโฟกัส ข้อมูลที่มีอยู่ใน SelectList นั้นอะครับ
ประมาณนี้อะครับ
รบกวนชี้แนะด้วยนะครับ
|
|
|
|
|
Date :
2013-01-09 15:19:44 |
By :
MaTaDoRcpe |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Load balance : Server 03
|