อ่านกันหรือยัง

วันนี้ผมจะมานำเสนอ การใช้งาน jQuery Autocomplete Plugin ลองคลิก Live Demo ดูครับ คุณสมบัติของปลั๊กอินตัวนี้ มากมายนัก แต่ผมจะนำเสนอ แบบที่ใช้งานง่ายที่สุด ให้ท่าน ถ้าเกิดว่าท่าน อยากจะใช้งานมันแบบสุดๆ ปรับแต่งมันแบบสุดๆ ก็คงต้องขอให้ท่านศึกษาจากเว็บไซต์ ต้นฉบับเขา ราตรียาวนานฝันยุ่งเหยิง เริ่มต้นกันเลยดีกว่า

เริ่มต้นที่ดาวน์โหลดตัวปลั๊กอินมาก่อน Download

หลังจากดาวน์โหลดมาแล้วและแตกซิปออก ในนั้นจะมีตัวอย่างการใช้งานอยู่ ท่านสามารถศึกษาจากตัวอย่าง ได้อีกทางหนึ่ง

เขียนโค้ดแรก โดยการ include ไฟล์ที่จำเป็นเข้ามา

<script type="text/javascript" src="jquery-autocomplete/lib/jquery.js"></script>
<script type="text/javascript" src="jquery-autocomplete/jquery.autocomplete.js"></script>
<script type="text/javascript" src="jquery-autocomplete/lib/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="jquery-autocomplete/lib/jquery.ajaxQueue.js"></script>
<script type="text/javascript" src="jquery-autocomplete/lib/thickbox-compressed.js"></script>
<link rel="stylesheet" href="jquery-autocomplete/lib/thickbox.css" />
<link rel="stylesheet" href="jquery-autocomplete/jquery.autocomplete.css" />

สร้าง textbox สำหรับใช้งาน

<input name="month" id="month" type="text" />

สร้าง Autocomplete ให้กับ textbox

<script type="text/javascript">
$(document).ready(function(){
 
	var str_month = "มกราคม กุมภาพันธ์ มีนาคม เมษายน พฤษภาคม มิถุนายน กรกฎาคม สิงหาคม กันยายน ตุลาคม พฤศจิกายน ธันวาคม";
	var arr_month = str_month.split(" ");
 
	$("#month").autocomplete( arr_month );
 
})
</script>

แค่เราส่ง array เป็นพารามิเตอร์เข้าไป เท่านี้ก็เรียบร้อย ส่วน array ท่านจะสร้างด้วยวิธีใด ก็สุดแล้วแต่ละครับ

$("#month").autocomplete( arr_month );

โค้ดทั้งหมด

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-autocomplete/lib/jquery.js"></script>
<script type="text/javascript" src="jquery-autocomplete/jquery.autocomplete.js"></script>
<script type="text/javascript" src="jquery-autocomplete/lib/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="jquery-autocomplete/lib/jquery.ajaxQueue.js"></script>
<script type="text/javascript" src="jquery-autocomplete/lib/thickbox-compressed.js"></script>
<link rel="stylesheet" href="jquery-autocomplete/lib/thickbox.css" />
<link rel="stylesheet" href="jquery-autocomplete/jquery.autocomplete.css" />
<title>Autocomplete jQuery Plugin</title>
<script type="text/javascript">
$(document).ready(function(){
 
	var str_month = "มกราคม กุมภาพันธ์ มีนาคม เมษายน พฤษภาคม มิถุนายน กรกฎาคม สิงหาคม กันยายน ตุลาคม พฤศจิกายน ธันวาคม";
	var arr_month = str_month.split(" ");
 
	$("#month").autocomplete( arr_month );
 
})
</script>
</head>
<body>
<input name="month" id="month" type="text" />
</body>
</html>

Live Demo

เพียงเท่านี้เองครับ เห็นมั้ยครับ ว่าวิธีการใช้งานนั้น ง่ายแสนง่าย

โค้ดด้านล่าง จะแสดงวิธีการใช้งานแบบ Advance ขึ้นมานึดนึง

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-autocomplete/lib/jquery.js"></script>
<script type="text/javascript" src="jquery-autocomplete/jquery.autocomplete.js"></script>
<script type="text/javascript" src="jquery-autocomplete/lib/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="jquery-autocomplete/lib/jquery.ajaxQueue.js"></script>
<script type="text/javascript" src="jquery-autocomplete/lib/thickbox-compressed.js"></script>
<link rel="stylesheet" href="jquery-autocomplete/lib/thickbox.css" />
<link rel="stylesheet" href="jquery-autocomplete/jquery.autocomplete.css" />
<title>Autocomplete jQuery Plugin</title>
<script type="text/javascript">
$(document).ready(function(){
 
	var str_month = "มกราคม กุมภาพันธ์ มีนาคม เมษายน พฤษภาคม มิถุนายน กรกฎาคม สิงหาคม กันยายน ตุลาคม พฤศจิกายน ธันวาคม";
	var arr_month = str_month.split(" ");
 
	$("#month").autocomplete( arr_month , {
		multiple: true, //ยอมให้ป้อนได้หลายค่า
		mustMatch: true, //ป้อนได้เฉพาะค่าที่เตรียมไว้ให้
		autoFill: true, //เติมคำอัตโนมัติ
		matchContains: true //หาค่าที่ไม่ใช่ตัวเริ่มต้น
	});
 
})
 
</script>
</head>
<body>
<input name="month" id="month" type="text" />
</body>
</html>

Live Demo

ดาวน์โหลดโค้ดตัวอย่าง : Download

ข้อมูลเพิ่มเติม : http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/

autocomplete jQuery jquery plugin Live Demo plugin
Avatar

วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย

Programmer, Blogger

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