ลูกเล่นสำหรับกล่องค้นหาของเว็บไซต์

มาอัพเดทกันซักหน่อย มีลูกเล่นเกี่ยวกับช่องค้นหา (input text) ไม่รู้ว่าจะเรียกว่ายังไงให้เข้าใจกันง่ายๆ เอาเป็นช่องค้นหาก็แล้วกันครับ ปกติผู้ใช้ก็จะพิมพ์คำที่ต้องการค้นหา แล้วก็กด Enter ป๊าบ ก็เรียบร้อย แต่ถ้าเพิ่มคำค้นเป็นสองสามคำ ก็เคาะ spacebar เว้นวรรคไปแบบเรียบๆ เดี๋ยวเรามาเพิ่มลูกเล่นให้กับช่องค้นหาของเรานิดนึง ^^

ลูกเล่นอันนี้อาศัย jQuery Tags Input ซึ่งเป็น jQuery Plugin โดยจะทำการเพิ่มสีสันให้กับคำค้นหาของเรา แถมถ้าต้องการจะลบก็กดแค่ครั้งเดียวก็ลบได้ทั้งคำแล้ว (ปกติถ้าต้องการจะลบทั้งคำสามารถกด ALT+DELETE ได้เลย แถมๆ )

หน้าตาก็จะเหมือนได้บนนะครับ (คำว่า imooh และ blog) เริ่มกันเลยดีกว่าบรรยายสรรพคุณยืดยาวแล้ว ^^

ก่อนอื่นก็ไป ดาวน์โหลด จากนั้นก็ที่เราต้องการก็มีอยู่ 2 ไฟล์ครับ หลังจากแตกไฟล์เสร็จแล้วจะอยู่ในโฟลเดอร์ชื่อ dist นะครับ ส่วน jQuery นี่ผมถือว่าเพื่อนๆ มีอยู่แล้วนะครับ ไม่ต้องพูดถึง ไม่งั้นคงเรียกว่า jQuery Plugin ไม่ได้ ฮ่าๆๆ

  1. jquery.tagsinput.min.css
  2. 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 ดู เผื่อมีการอ้างที่อยู่ของไฟล์ไม่ถูกต้องครับ