|
 |
| |
แชร์ (Share) : ดึงข้อมูล แบบ real time แบบหลายบรรทัด เหมาะกับการ ออกใบเสร็จ ออกบิล |
| |
 |
|
|
 |
 |
|
เป็นการส่งต่อครับ ได้ความรู้จากพี่ Cr.tomrambo ขอบคุณพี่เขามาก เลยเอามาให้คนที่อยากทำคล้ายๆกันได้เอาไปประยุค ใช้
test1.php
Code (PHP)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function(){
$('.keyword').keyup(function(){
var inputID = $(this).attr('inputID');
if ($(this).val().length >= 1) {
$.post('test2.php',{keyword: $(this).val(), inputID: inputID},function(data){
$('#name_list_'+inputID).slideDown('fast');
$('#name_list_'+inputID).html(data);
});
} else {
$('#name_list_'+inputID).slideUp('fast');
}
});
$('.keyword').change(function(){
$('#name_list_'+$(this).attr('inputID')).fadeOut('fast');
})
});
function putValue(name,email,tel,id) {
$('#full_name_'+id).val(name);
$('#email_'+id).val(email);
$('#tel_'+id).val(tel);
$('#name_list_'+id).hide();
}
</script>
<style>
body {
padding: 10px;
background: #ffffff;
text-align: center;
font-family: arial;
font-size: 16px;
color: #333333;
}
.label_div {
width: 80px;
float: left;
text-align: right;
padding-right: 10px;
line-height: 28px;
}
.form_content {
height: 30px;
float: left;
}
.form_content input {
height: 20px;
width: 200px;
padding: 3px;
border: 1px solid #cccccc;
border-radius: 0;
font-size: 14px;
}
.form_content ul {
width: 206px;
border: 1px solid #eaeaea;
position: absolute;
z-index: 9;
background: #f3f3f3;
list-style: none;
-moz-box-shadow: inset 0 8px 8px -8px #696868;
-webkit-box-shadow: inset 0 8px 8px -8px #696868;
box-shadow: inset 0 8px 8px -8px #696868;
}
.form_content ul li {
padding: 2px;
}
.form_content ul li:hover {
background: #eaeaea;
}
.form_content ul li:first-child:hover {
-moz-box-shadow: inset 0 8px 8px -8px #696868;
-webkit-box-shadow: inset 0 8px 8px -8px #696868;
box-shadow: inset 0 8px 8px -8px #696868;
}
.show_list {
display: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<form>
<?php
$numInput = 5; //จำนวนแถวกรอกข้อมูล
for($i=1;$i<=$numInput;$i++){
?>
<div class="label_div">ชื่อ : </div>
<div class="form_content">
<input type="text" id="full_name_<?php echo $i ?>" class="keyword" inputID="<?php echo $i ?>">
<ul class="show_list" id="name_list_<?php echo $i ?>"></ul>
</div>
<div class="label_div">Email : </div>
<div class="form_content">
<input type="text" id="email_<?php echo $i ?>">
</div>
<div class="label_div">เบอร์โทร : </div>
<div class="form_content">
<input type="text" id="tel_<?php echo $i ?>">
</div>
<br style="clear:both" />
<?php
}
?>
</form>
</body>
</html>
test2
Code (PHP)
<?php
include("conect1.php");//เชื่อต่อฐานข้อมูล
$sql = "SELECT * FROM member WHERE name LIKE '%".$_POST['keyword']."%'
ORDER BY name ASC LIMIT 0, 10";
$query = mysql_query($sql);
while($arr = mysql_fetch_array($query)){
$name_search = str_replace($_POST['keyword'], '<b><font color="#417fe2">'.$_POST['keyword'].'</font></b>', $arr['name']);
echo '<li onclick="putValue(\''.str_replace("'", "\'", $arr['name']).'\',\''.str_replace("'", "\'", $arr['email']).'\',\''.str_replace("'", "\'", $arr['tel']).'\',\''.str_replace("'", "\'", $_POST['inputID']).'\')">'.$name_search.'</li>';
}
?>
Tag : PHP, HTML/CSS, Action Script, Ajax, jQuery
|
|
|
 |
 |
 |
 |
| Date :
2017-03-14 15:00:48 |
By :
sawmon |
View :
6337 |
Reply :
2 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
เยี่ยมเลยครับ เดียวว่างๆ จะแชร์ให้ของดีมีประโยชน์
|
| |
|
|
| |
| Date :
2017-03-14 17:14:52 |
By :
mr.win |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
|
| |
|
|
| |
| Date :
2017-03-15 10:29:29 |
By :
sawmon |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 03
|
