PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

สร้างฟังก์ชัน autocomplete ให้ใช้งานแบบง่าย ด้วย ajax

05 July 2009 By


ตัวอย่าง

ไฟล์ที่จำเป็นต้องใช้
1.autocomplete.js
2.autocomplete.css
3.autocomplete.gif
ทำการดาวโหลดโดยคลิกขวาที่ลิ้งไฟล์ด้านบน แล้วทำการบันทึก

HTML Code ตัวอย่าง

<html>
<head>
<title></title>
<script type="text/javascript" src="autocomplete.js"></script>
<link rel="stylesheet" href="autocomplete.css"  type="text/css"/>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
  <input name="show_arti_topic" type="text" id="show_arti_topic" size="50" />
  <input name="h_arti_id" type="hidden" id="h_arti_id" value="" />
</form>
<script type="text/javascript">
// แทรก javascript
</script>
</body>
</html>

Javascript Code

<script type="text/javascript">
function make_autocom(autoObj,showObj){
	var mkAutoObj=autoObj; 
	var mkSerValObj=showObj; 
	new Autocomplete(mkAutoObj, function() {
		this.setValue = function(id) {		
			document.getElementById(mkSerValObj).value = id;
		}
		if ( this.isModified )
			this.setValue("");
		if ( this.value.length < 1 && this.isNotClick ) 
			return ;	
		return "gdata.php?q=" +encodeURIComponent(this.value);
    });	
}	
 
// การใช้งาน
// make_autocom(" id ของ input ตัวที่ต้องการกำหนด "," id ของ input ตัวที่ต้องการรับค่า");
make_autocom("show_arti_topic","h_arti_id");
</script>

gdata.php Code

<?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);       
// เชื่อมต่อฐานข้อมูล
$link=mysql_connect("localhost","root","123456") or die("error".mysql_error());
mysql_select_db("database_name",$link);
mysql_query("set character set utf8");
 
$q = urldecode($_GET["q"]);
$pagesize = 50; // จำนวนรายการที่ต้องการแสดง
$table_db="article"; // ตารางที่ต้องการค้นหา
$find_field="arti_topic"; // ฟิลที่ต้องการค้นหา
$sql = "select * from $table_db  where locate('$q', $find_field) > 0 order by locate('$q', $find_field), $find_field limit $pagesize";
$results = mysql_query($sql);
while ($row = mysql_fetch_array( $results )) {
	$id = $row["arti_id"]; // ฟิลที่ต้องการส่งค่ากลับ
	$name = ucwords( strtolower( $row["arti_topic"] ) ); // ฟิลที่ต้องการแสดงค่า
	// ป้องกันเครื่องหมาย '
	$name = str_replace("'", "'", $name);
	// กำหนดตัวหนาให้กับคำที่มีการพิมพ์
	$display_name = preg_replace("/(" . $q . ")/i", "<b>$1</b>", $name);
	echo "<li onselect=\"this.setText('$name').setValue('$id');\">$display_name</li>";
}
mysql_close();
?>

Tags:: autocomplete php ajax





URL สำหรับอ้างอิง