Google Developer API กับการสร้าง Custom Search ด้วย jQuery
คราวนี้ผมจะพานักพัฒนาทุกคนไปรู้จักการพัฒนาโปรแกรมบนเว็บ ด้วย Google Developer API ของ Custom Search API ครับซึ่งเป็นการสร้างหน้าการค้นหาข้อมูลโดยใช้ API ของ Google Custom Search API มาช่วย และใช้การแสดงผลผ่าน jQuery เพื่อทำให้ผลลัพธ์แสดงผลออกมาได้อย่างเต็มประสิทธิภาพครับ นั่นหมายความว่าบทความนี้จะเป็น How To ที่น่าจะช่วยให้เราสร้าง Search Box หรือระบบการค้นหาที่เทียบเท่ากับ Google เลยครับ ซึ่งบทความนี้จะไม่เกิดขึ้นถ้าปรากศจากไอเดียของเจ้าของเว็บไซต์ jQuery4u.com ครับ
เริ่มต้นพัฒนา Custom Search API ของ Google ด้วย jQuery
ก่อนอื่นเลยคุณต้องมี API KEY ของ Google Developer ครับซึ่งต้องเข้าไปที่หน้าเว็บไซต์ https://code.google.com/apis/console/b/0/ ครับ
เราต้องใช้ API KEY มาช่วยนะครับ
เสร็จแล้วให้เราสร้าง HTML ไฟล์ขึ้นมาครับ โดยใช้คำสั่งในส่วน HEAD ว่า
<html> <head> <script src="https://www.google.com/jsapi?key=AIzaSyDCmT5nCzKpRd9KpRsbgeENghJrwF_Po9c" type="text/javascript"></script> <script type="text/javascript"> google.load("search", "1", {"language" : "th"}); // Call this function when the page has been loaded function initialize() { var searchControl = new google.search.SearchControl(); // site restricted web search var siteSearch = new google.search.WebSearch(); siteSearch.setUserDefinedLabel("daydev.com"); siteSearch.setUserDefinedClassSuffix("siteSearch"); siteSearch.setSiteRestriction("daydev.com"); searchControl.addSearcher(siteSearch); //Search API Topics searchControl.addSearcher(new google.search.WebSearch()); searchControl.addSearcher(new google.search.NewsSearch()); searchControl.addSearcher(new google.search.BlogSearch()); searchControl.addSearcher(new google.search.ImageSearch()); searchControl.addSearcher(new google.search.BookSearch()); searchControl.addSearcher(new google.search.VideoSearch()); //others //searchControl.addSearcher(new google.search.LocalSearch()); //searchControl.addSearcher(new google.search.PatentSearch()); // create a drawOptions object var drawOptions = new google.search.DrawOptions(); // tell the searcher to draw itself in tabbed mode drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED); searchControl.draw(document.getElementById("searchcontrol"), drawOptions); } google.setOnLoadCallback(initialize); </script> |
ตามด้วยส่วนของ HEAD และ BODY นะครับแบ่งเป็น CSS และ jQuery ทีละส่วน
<style type="text/css"> /* the width of the controls (keep same as gsc-results for flush look) */ #searchcontrol { width:600px; } .gsc-control { width:600px; } /* the width of the search results box; no height value = nice auto look */ .gsc-results { width:600px; } /* the width of the search input */ .gsc-input { width:20px; } /* hide "powered by google" (optional) */ .gsc-branding { display:none; } .gs-title a { color:orange; font-weight:bold; } #searchcontrol a { color:orange; } </style> <title>jQuery and Google Search API Workshop</title> </head> |
จะเห็นว่า Code ทั้งหมดของ HTML นั้นจะเป็นเหมือนตัวอย่างข้างล่าง
<body> <h1>Develope Google Search API with jQuery Tutorial</h1> <p>Insert your Keyword</p> <div id="searchcontrol"></div> <p>Powered by <a href="http://www.daydev.com" title="Social Media Marketing">Social Media Marketing</a> & JQuery4U</p> </body> </html> |
เวลาที่เราแสดงผล และลองค้นหาดูจะเห็นหน้าผลลัพธ์แบบนี้ครับ
ทดลองการค้นหา
ผลลัพธ์จากต่างประเทศ
ค้นหาด้วยรูปภาพครับ
ค้นหา หนังสือดีๆ จาก google book ก็ได้
ค้นหาเป็นวีดีโอก็ได้ครับ
เป็นยังไงบ้างครับการใช้ jQuery มาแสดงผลร่วมกับ Google Custom Search API ทำให้เราสามารถใช้งานการค้นหาที่ รวดเร็วและสวยงามครับ หากว่าใครอยากได้ Source Code ก็สามารถดาวน์โหลดได้ที่นี่นะครับ
หรือเข้าไปดูตัวอย่างที่ http://www.daydev.com/demo/jqgoogle/ ก็ได้ครับ ขอให้สนุกกับการสร้าง Custom Search ของตัวเองด้วย Google API ครับ
