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/ ครับ

เสร็จแล้วให้เราสร้าง 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>

<html>

<head>

type="text/javascript"></script>

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>

/* 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>

<body>

<h1>Develope Google Search API with jQuery Tutorial</h1>

<p>Insert your Keyword</p>

<p>Powered by <a href="http://www.daydev.com" title="Social Media Marketing">Social Media Marketing</a> & JQuery4U</p>

</body>

</html>

เวลาที่เราแสดงผล และลองค้นหาดูจะเห็นหน้าผลลัพธ์แบบนี้ครับ

เป็นยังไงบ้างครับการใช้ jQuery มาแสดงผลร่วมกับ Google Custom Search API ทำให้เราสามารถใช้งานการค้นหาที่ รวดเร็วและสวยงามครับ หากว่าใครอยากได้ Source Code ก็สามารถดาวน์โหลดได้ที่นี่นะครับ