การสร้าง ajax dictionary จาก longdo ด้วย jQuery

27 December 2010 By

ตัวอย่างการใช้งานต่อไปนี้ เป็นการนำ ระบบค้นหาคำศัพท์ จากเว็บไซต์
http://dict.longdo.com/

ดู Longdo Dict Application Programming Interface (API) ได้ที่
http://dict.longdo.com/page/api

เหมาะสำหรับใครที่ต้องการนำระบบค้นหาคำศัพท์ dictionary รูปแบบ ajax ไปตกแต่งเว็บไซต์
โดยเฉพาะเว็บไซต์เกี่ยวกับการศึกษา

โดยจุดประสงค์หลักของเนื้อหา คือ ทำความคุ้นเคย กับการใช้งาน ajax ใน jQuery ซึ่งในเว็บไซต์ ก็ได้
นำเสนอไปหลายครั้ง หลายรูปแบบ แล้ว

ตัวอย่าง


วิธีการ
1.สร้างไฟล์ php ชื่อ ajax_translate.php ดังโค้ดด้านล่าง (คำอธิบายแสดงในโค้ด)

<?php
header("Content-type:text/html; charset=UTF-8");        
header("Cache-Control: no-store, no-cache, must-revalidate");       
header("Cache-Control: post-check=0, pre-check=0", false);       
// ตรวจสอบว่ามีการส่งคำค้นมาหรือไม่
if(isset($_GET['keyword']) && trim($_GET['keyword'])!=""){
	$keyword=trim($_GET['keyword']);
	// นำผลลัพธ์การค้นหา จาก longdo dictionary มาไว้ในตัวแปร
	$data=file_get_contents("http://dict.longdo.com/mobile.php?search=".$keyword);	//
	echo strip_tags($data,"<a><table><td><tr><font><style><meta><br>"); // แสดงส่วนของเนื้อหาที่จำเป็นต้องแสดง
}else{ // กรณีไม่มีการส่งคำค้นมา
	echo "โปรดระบุคำที่ต้องการแปล";	// แสดงข้อความแจ้งเตือน
}
?>

2.สร้างไฟล์สำหรับทดสอบ demo_ajax_translate.php ตามโค้ดด้านล่าง กรุณาอ่านคำแนะนำในโค้ด
โดยจะมีอยู่ 3 ส่วน คือ
1.ส่วนของ css สำหรับกำหนดรูปแบบ สีข้อความ พื้นหลัง หรืออื่นๆ ตามต้องการ
2.ส่วนของ element องค์ประกอบในการใช้งาน
3.ส่วนของ javascript โดยใช้งานผ่าน jQuery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>longdo ajax dictionary</title>
<!--1.ส่วนของ css สำหรับกำหนดรูปแบบ สีข้อความ พื้นหลัง หรืออื่นๆ ตามต้องการ-->
<style type="text/css">
div#myblock_dict{
	font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
	font-size:12px;	
	margin:auto;
	width:350px;	
}
input#translate_it{
	background-color:#F6C;
	color:#FFF;	
	border:1px groove #F9C;
	cursor:pointer;
}
div#input_search{
	background-color:#000;
	color:#FFF;
	text-align:center;
}
div#context_search{
	border:1px solid #F9C;
	height:300px;
	overflow:auto;
}
div#context_search{
	font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
	font-size:12px;	
	padding:5px;
	background-color:#FDEDFE;
}
div#context_search a{
	margin-left:3px !important;
	color:#F09;	
}
div#context_search td{
	padding:5px !important;
}
</style>
</head>

<body>


<!--2.ส่วนของ element องค์ประกอบในการใช้งาน-->
<div id="myblock_dict">
<div id="input_search">คำค้น
  <input type="text" name="keyword_q" id="keyword_q" />
  <input type="button" name="translate_it" id="translate_it" value="แปล" />
</div>
<div id="context_search">

</div>
</div>


<!--3.ส่วนของ javascript โดยใช้งานผ่าน jQuery-->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
		// กำหนดตัวแปรสำหรับแสดงรูปกำลังโหลด
		var loading_img='
';
		loading_img+='';
		loading_img+='
';
		$("#keyword_q").click(function(){ // เมื่อคลิกที่ช่องคำค้น 
			// เพื่อสะดวกในการพิมพ์คำค้นใหม่ได้เลย
			$(this).select(); //  ถ้ามีข้อความอยู่ ให้ทำการเลือกข้อความนั้น
			$("#context_search").html(""); //  ล้างค่าข้อความผลลัพธ์เดิม ถ้ามี
		});
		$("#translate_it").click(function(){  // เมื่อคลิกที่ปุ่มคำว่า แปล
			$("#context_search").html(loading_img); // แสดงรูปกำลังโหลดในส่วนผลลัพธ์
			// ใช้ ajax ใน jQuery ส่งข้อมูลแบบ get
			$.get("ajax_translate.php",{keyword:$.trim($("#keyword_q").val()) },function(data){
				$("#context_search").html(data); // แสดงผลลัพธ์จากการค้นหา
			});
		});
		
		$("#keyword_q").keyup(function(event){
			if(event.keyCode==13){ // เมื่อกดปุ่ม Enter ให้เริ่มการค้นหา
				$("#context_search").html(loading_img); // แสดงรูปกำลังโหลดในส่วนผลลัพธ์
				$.get("ajax_translate.php",{keyword:$.trim($("#keyword_q").val())},function(data){
					$("#context_search").html(data); // แสดงผลลัพธ์จากการค้นหา
				});				

			}
		});
		
		// เมื่อคลิกที่ลิ้งค์ ในผลลัพธ์
		$("div#context_search a").live("click",function(){
			var text_search=$.trim($(this).text()); // นำคำจากลิ้งค์ที่คลิก มาเก็บในตัวแปร
			$("#context_search").html(loading_img); // แสดงรูปกำลังโหลดในส่วนผลลัพธ์
			$("#keyword_q").val(text_search); // นำคำจากลิ้งค์ไปแสดงที่ช่อง คำค้น
			$.get("ajax_translate.php",{keyword:text_search},function(data){
            	$("#context_search").html(data); // แสดงผลลัพธ์จากการค้นหา
			});		
			return false;			
		});
});
</script>


</body>
</html>

 








บทความในหมวดที่่น่าสนใจ อื่นๆ AJAX Learning

25 Sep 08 ตรวจสอบโดเมน Domain ด้วย Ajax อ่าน 4499

บทความคนเข้าอ่านวันนี้

10 Nov 08 ฟังก์ชัน PHP ตัดข้อความยาวด้วย wordwrap อ่าน 7000 25 Sep 08 ตรวจสอบโดเมน Domain ด้วย Ajax อ่าน 4499 14 Sep 10 การดึงข้อมูล จากฐานข้อมูล สร้าง xml ไฟล์ ด้วย php อ่าน 10869 06 Jun 11 แนวทางการกำหนด expired header ให้กับรูปภาพ ด้วย php อย่างง่าย อ่าน 3020 02 Jun 09 แก้ปัญหา การดึงข้อมูล จากฐานข้อมูล เมื่อเปลี่ยน charset ใน แท็ก meta อ่าน 5449 23 Jan 12 แนวทางการประยุกต์ การซ่อน แสดงเนื้อหาสำหรับล็อกอิน อย่างง่าย ด้วย jQuery อ่าน 4832 27 Aug 10 เทคนิค jQuery สร้าง preloading page หรือ loading image ก่อนแสดงหน้าเว็บ อ่าน 11840 25 Sep 08 การกำหนด selectors ด้วย jQuery แบบตัวกรองพื้นฐาน อ่าน 4208 05 Feb 09 เพิ่มลูกเล่นการโหวด Vote หรือ Rating ด้วย jQuery และ CSS อ่าน 6201 05 Nov 08 CSS สร้างเมนูแนวนอน 2 ชั้นโดยไม่ใช้ javascript และตาราง table อ่าน 15713 06 Mar 11 แนะนำ ปลั๊กอิน comment ตัวใหม่ของ facebook อ่าน 8907 16 Oct 08 การแสดงเฉพาะปุ่มสำหรับ upload อ่าน 5185 01 Apr 09 การแก้ปัญหากรณี div หลักไม่ขยายตามความสูงของ div ย่อย ใน Firefox อ่าน 5006 27 Mar 10 ทำให้ เลือก list box แล้วแสดง checkbox ด้วย jQuery อ่าน 7573 14 Dec 10 แนะนำ php ip 2 country สำหรับเช็ค ip ว่ามาจากประเทศอะไร อ่าน 4372 03 Oct 10 แสดงข้อมูลตัวเลือก ด้านข้าง google map กับการใช้งาน event.trigger อ่าน 3968 19 Sep 10 DirectionsService DirectionsRenderer ค้นหา และสร้าง เส้นทางใน google map อ่าน 6903 25 Sep 08 การแสดงข้อมูลจากตารางด้วย PHP อ่าน 9627 06 Jan 09 บวกวันใน javascript ด้วยฟังก์ชัน day add อย่างง่าย อ่าน 6329 09 Sep 10 Google map API v.3 กับ jQuery ลากจุดหา พิกัด ค่า latitude และ longitude อ่าน 16080
จำนวนผู้เยี่ยมชม 1384093
Author คน 2013 © Copyright ninenik.com. All rights reserved.