|
 |
|
jQuery Autocomplete : กรอกปี พ.ศ. เกิด ให้โชว์ข้อมูล และคำนวณอายุให้เสร็จ มีการใช้ onkeyup เข้ามาร่วมในการทำงานด้วย |
|
 |
|
|
 |
 |
|
ปัญหาที่พบก่อนจะทำสำเร็จ
1.เมื่อกรอกข้อมูล แล้วเจอข้อมูลที่ต้องการ พอเรากดเลือกแล้วค่าที่ได้ ไม่ตรงกับ พ.ศ. เช่น
พิมพ์ 32 ข้อมูลจะแสดง 2532 ขึ้นมา เมือกดเลือก 2352 ค่าที่ได้จึงเป็นเพียง 32
ที่ได้ 32 เพราะให้ $(this).val()
2. เมื่อกรอกข้อมูลครบ (ไม่มีข้อมูลใน Autocomplete) ใส่ onkeyup แล้วค่าไม่คำนวณ
เมื่อทำสำเร็จตาม Code
1. เมื่อเจอข้อมูล และทำการเลือกค่านั้นแล้ว ให้คำนวณอายุใส่ลงไปในช่อง intext
2. ระหว่างนั้นใส่ onkeyup เข้าไปช่วยหากไม่เจอ พ.ศ. ที่ต้องการก็จัดการคำนวณอายุเมื่อกรอก พ.ศ. เสร็จ
เนื่องจาก อยากจะหัดใช้ jQuery มาช่วยในงาน
สิ่งที่แบ่งปันเป็นสิ่งที่ใหม่สำหรับผม
อาจจะเป็นประโยชน์ไม่มากก็น้อย
http://jqueryui.com/autocomplete/
Code (PHP)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
var availableTags = [
"2520","2521","2522","2523","2524","2525","2526","2527","2528","2529","2530","2531","2532","2533","2534","2535","2536","2537","2515","2516","2517","2518","2519",""
];
$( "#tags" ).autocomplete({
source: availableTags,
select: function (event, ui) {
var selectedObj = ui.item;
//alert(selectedObj.value);
$("#age").val(2557-selectedObj.value);
$(".gender1").focus();
},
open:function(){
$(this).keyup(function(){
$("#age").val(2557-parseFloat(this.value));
});
}
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input type="text" id="tags" name="tags">
</div>
<div class="ui-widget">
<label>อายุ</label>
<input type="text" class="age" id="age" name="age"/>
<label>ปี </label>
</div>
</body>
</html>
Tag : PHP, jQuery

|
ประวัติการแก้ไข 2014-04-07 15:23:20
|
 |
 |
 |
 |
Date :
2014-04-07 15:22:42 |
By :
apisitp |
View :
1996 |
Reply :
3 |
|
 |
 |
 |
 |
|
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
Demo http://jsbin.com/rucib/1/
ลองทดสอบดูนะครับ ... ผมทำเป็น Datepicker ไม่ได้ทำเป็น Auto Complete นะครับ
แต่สามารถนำไปประยุกต์ต่อได้
|
 |
 |
 |
 |
Date :
2014-04-07 17:53:45 |
By :
deawx |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
เมื่อมีการเริ่ม ก็ไม่มีทางสิ้นสุดได้เสมอ ขอแค่ได้เริ่ม 
|
ประวัติการแก้ไข 2014-04-07 18:04:00
 |
 |
 |
 |
Date :
2014-04-07 18:02:20 |
By :
apisitp |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
จงเขียนโปรแกรม PHP ที่ใช้เลือก ปี พ.ศ.เกิด ของผู้ที่จะใช้งานระบบได้ ให้ผู้ที่มีอายุตั้งแต่ 15 ขึ้นไป จนถึง อายุ 35 ปี โดยใช้ for loop แล้วให้แสดงค่าออกมา ใครก็ได้ช่วยผมหน่อย
|
 |
 |
 |
 |
Date :
2014-10-24 12:40:09 |
By :
นพรัตน์ |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
|
|
|

|
Load balance : Server 02
|