มาอัพเดทกันซักหน่อย มีลูกเล่นเกี่ยวกับช่องค้นหา (input text) ไม่รู้ว่าจะเรียกว่ายังไงให้เข้าใจกันง่ายๆ เอาเป็นช่องค้นหาก็แล้วกันครับ ปกติผู้ใช้ก็จะพิมพ์คำที่ต้องการค้นหา แล้วก็กด Enter ป๊าบ ก็เรียบร้อย แต่ถ้าเพิ่มคำค้นเป็นสองสามคำ ก็เคาะ spacebar เว้นวรรคไปแบบเรียบๆ เดี๋ยวเรามาเพิ่มลูกเล่นให้กับช่องค้นหาของเรานิดนึง ^^
ลูกเล่นอันนี้อาศัย jQuery Tags Input ซึ่งเป็น jQuery Plugin โดยจะทำการเพิ่มสีสันให้กับคำค้นหาของเรา แถมถ้าต้องการจะลบก็กดแค่ครั้งเดียวก็ลบได้ทั้งคำแล้ว (ปกติถ้าต้องการจะลบทั้งคำสามารถกด ALT+DELETE ได้เลย แถมๆ )
หน้าตาก็จะเหมือนได้บนนะครับ (คำว่า imooh และ blog) เริ่มกันเลยดีกว่าบรรยายสรรพคุณยืดยาวแล้ว ^^
ก่อนอื่นก็ไป ดาวน์โหลด จากนั้นก็ที่เราต้องการก็มีอยู่ 2 ไฟล์ครับ หลังจากแตกไฟล์เสร็จแล้วจะอยู่ในโฟลเดอร์ชื่อ dist นะครับ ส่วน jQuery นี่ผมถือว่าเพื่อนๆ มีอยู่แล้วนะครับ ไม่ต้องพูดถึง ไม่งั้นคงเรียกว่า jQuery Plugin ไม่ได้ ฮ่าๆๆ
- jquery.tagsinput.min.css
- jquery.tagsinput.min.js
ก็ก๊อปปี้ 2 ไฟล์นี้ไปว่าไว้ให้ถูกที่ถูกทางนะครับ stylesheet ก็ควรอยู่กับ stylesheet ส่วน javascript ก็เหมือนกัน ไม่ใช่ว่าวางปนกันมั่วไปหมดนะ
ต่อไปก็เพิ่มแท็ก script และ link เพิ่มเอาไฟล์มาใช้ให้เรียบร้อย
<script src="/url/to/jquery.tagsinput.js"></script> <link rel="stylesheet" type="text/css" href="/url/to/jquery.tagsinput.css" />
หลังจากเพิ่มแท็กเรียบร้อยแล้ว ก็จะเป็นการตั้งค่าการใช้งานครับ สิ่งที่ต้องมีก็คือ id ของ input text ที่เป็นช่องค้นหา ตัวอย่าง id ของผมก็คือ input-keyword ครับ
<input type="text" name="keyword" id="input-keyword" value="" >
เพิ่ม script เพื่อตั้งค่าการใช้งาน ซึ่งก็ง่ายมากๆ ^^ ก่อนอื่นก็เอาค่าเริ่มต้นไปเลยถ้าไม่ชอบหรือต้องการเปลี่ยนแปลงก็ค่อยจัดการทีหลังครับ
$('#input-keyword').tagsInput();
ถ้าไม่มีข้อผิดพลาดอะไรก็น่าจะเรียบร้อย ^^ หรือถ้าไม่มีอะไรเกิดขึ้นก็ลองตรวจสอบ javascript error ดู เผื่อมีการอ้างที่อยู่ของไฟล์ไม่ถูกต้องครับ