[WP] ทำ Autocomplete ในช่อง Search กันค่า

ช่วงนี้ก็หาเทคนิคต่างๆ ในการปรับแต่ง wordpress ที่น่าสนใจและน่าทำหลายอย่าง เพื่อจะได้ทำการปรับปรุงบล็อกให้โดนใจสุด แล้วก็มานั่งดูว่าจะปรับส่วนไหนบ้างดี ก็เลยเห็นที่ช่องการค้นหา เพราะว่าตอนนี้เอนทรี่ที่เขียนไปก็เริ่มจะเยอะมากขึ้นเรื่อย การค้นหาข้อมูลภายในบล็อกก็เป็นส่วนสำคัญเพื่อให้ความสะดวกแก่ผู้ที่เข้าชมเว็บไซต์ พอลองค้นหาข้อมูลดูเลยไปเจอPlugin ที่น่าสนใจของ wordpress ที่ชื่อว่า “Autocompleter” ดังนั้นก็มาเริ่มทำ Autocomplete ในช่อง Search กันค่า

• ขั้นตอนการติดตั้ง

1. ไปโหลด Plugin มาก่อนที่ http://wordpress.org/extend/plugins/autocompleter/
2. เข้าระบบ Admin แล้วที่แถบเมนูด้านขวาเลือก Plugin > Add New
3. เลือก Upload
   
4. เลือกไฟล์ .zip ที่เซฟมาแล้วกด Install Now
5. ทำการ Active
6. เสร็จสิ้นขั้นตอนการติดตั้ง

• ตั้งค่าเพิ่มเติมให้กับ Autocompleter

1. เลือก Setting ที่แถบเมนูด้านขวา
2. เลือก Autocompleter
   
3. ตั้งค่าเพิ่มเติม
   

• ผลการติดตั้งปลั๊กอิน

• การเปลี่ยนแปลงขนาดของช่องของผลการค้นหา

ออฟอยากปรับช่องผลของการค้นหาให้กว้างขึ้น แต่มันไม่สามารถปรับที่ไฟล์ autocompleter.css ได้ต้องไปปรับที่jquery.autocomplete.js

1. ทำปรับสิทธิ์ในการเข้าถึงไฟล์ autocompleter/jquery.autocomplete.js ให้เป็น 777 ก่อน
2. ค้นหาคำว่า “showResults” ซึ่งเป็นฟังก์ชั่นในการแสดงผลการค้นหา
3. ทำการปรับค่า widthตามที่ต้องการ ในส่วนของ // หรือคอมเม้นต์เป็นโค้ดของเดิม
   

• Thanks to nik.chankov.net.

• แนะนำอีกหนึ่งปลั๊กอินที่ช่วยทำ Auto-complete ให้กับการค้นหา

Kau-Boy’s AutoCompleter เป็นปลั๊กอินอีกตัวที่ช่วยในการทำ  Auto-complete พร้อมกับให้สามารถตั้งค่าเพิ่มเติมได้ว่าผลการค้นหานั้นจะให้แสดง Title, Content ที่คำค้นหาหรือ Keyword อยู่ตรงไหนแต่ออฟคิดว่ามันทำให้หน้าจอดูรกๆ ไปหน่อย แต่ถ้าใครอยากได้ผลการค้นหาที่ค่อนข้างละเอียดปลั๊กอินตัวนี้ก็น่าสนใจดีนะ คะ Screenshot in new WordPress blog

• เพิ่มเติม

– How to: Create an Ajax-based Auto-completing Search Field for your WordPress Theme

– 3-codes-for-a-far-better-wordpress-search-page