วันนี้ถึงเวลาที่ต้องทำ Multiple Input
สำหรับระบบ Tag ของระบบอัลบั้มรูป
ที่ต้องทำที่ทำงานแล้ว

หลังจากหลีกเลี่ยงไม่ได้

ก็เลยไปค้นจากอากู๋
เจอเว็บไซต์แจก Source Code พอดี
แถมเป็น AJAX แบบที่ต้องการเลย

• ดาวน์โหลด Source Code จากเว็บ
  หรือ
• ดาวน์โหลดจากที่นี่

วิธีใช้งาน

แตก zip ไฟล์ ก็จะได้ไฟล์ 4 ไฟล์ดังนี้

แต่เวลาใช้งานจริงๆ จะใช้แค่ 3 ไฟล์

ส่วนไฟล์ actc_article.html จะเป็นคล้ายๆ Readme

แล้วนำ Code ไปใส่ใน Form HTML ที่ต้องการใช้งาน Text Input (Text Field)

<script language="javascript" type="text/javascript" src="include/actb.js"></script>
<script language="javascript" type="text/javascript" src="include/common.js"></script>
<script>
var customarray=new Array('an apple','alligator','elephant','pear','kingbird',
'kingbolt','kingcraft','kingcup','kingdom','kingfisher',
'kingpin');
</script>

<input type='text' style='font-family:verdana;width:300px;font-size:12px;' id='tb' value=''/>

<script>
var obj = actb(document.getElementById('tb'),customarray);
//setTimeout(function(){obj.actb_keywords = custom2;},10000);
</script>

ก็จะสามารถใช้งาน Multiple Auto-Complete ได้เลย

โปรดสังเกต Auto-Complete จะดึงข้อมูลจาก Array

ถ้าต้องการให้ Auto-Complete ดึงข้อมูลจาก Database ให้ใส่ Code แทนบรรทัด

var customarray=new Array('an apple', 'alligator', 'elephant', 'pear', 'kingbird', 'kingbolt', 'kingcraft', 'kingcup', 'kingdom', 'kingfisher', 'kingpin');

แทนที่ด้วย Code ที่ดึงข้อมูลจาก Database

<?php
function db_connect() {
$db = mysql_connect("localhost","YOUR USER","YOUR PASSWORD");
if (!$db) {
echo "Error ";
exit;
}
mysql_select_db("YOUR DATABASE");
}
db_connect();

$result = mysql_query("SELECT your_column FROM your_table ORDER BY your_column");
if (mysql_num_rows($result)) {
while ($row = mysql_fetch_assoc($result)) {
$customarray[] = $row[your_column];
}
}

echo 'var customarray = new Array("' . implode('", "', $customarray) . '")';
?>

เท่านี้ก็จะได้ Auto-Complete Input Form เรียบร้อยแล้วจ้า

อ้ะ! เวลาใส่ Multiple Auto-Complete จะเป็นอย่างนี้น้า

ขอให้สนุกกับ Code ค่า