|
 |
|
การ Submit แบบอัตโนมัติ และการ select หลายๆ ฟิลด์ ของ auto complete ทำอย่างไร |
|
 |
|
|
 |
 |
|
จะให้มัน Submit อัตโนมัติ แบบ Google ค่ะ ทำอย่างไร
และ อยากให้สามารถเลือกได้หลายๆฟิลด์ทำได้ไหม
ตอนนี้มันเลือกได้แค่ material_name อย่างเดียว
Code
<form id="form_matr_search" name="form1">
<input style="width:200px; height:20px" name="show_arti_topic" type="text" id="show_arti_topic" />
<input name="h_arti_id" type="hidden" id="h_arti_id" value="" />
<input name="submit" type="submit" value="Search"/>
</form>
<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 "auto_complete.php?q=" +encodeURIComponent(this.value);
});
}
make_autocom("show_arti_topic","h_arti_id");
</script>
auto_complete.php
Code (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);
?>
<?PHP require('config.php');?>
<?php
$q = urldecode($_GET["q"]);
$pagesize = 50; // จำนวนรายการที่ต้องการแสดง
$table_db="materials"; // ตารางที่ต้องการค้นหา
$find_field="material_name"; // ฟิลที่ต้องการค้นหา
$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["material_id"];
// ฟิลที่ต้องการส่งค่ากลับ
$name = ucwords( strtolower( $row["material_name"] ) ); // ฟิลที่ต้องการแสดงค่า
// ป้องกันเครื่องหมาย '
$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>";
}
?>
Tag : PHP, MySQL

|
ประวัติการแก้ไข 2011-02-25 18:33:52
|
 |
 |
 |
 |
Date :
2011-02-25 18:32:02 |
By :
Avrill |
View :
3059 |
Reply :
5 |
|
 |
 |
 |
 |
|
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
ใส่ form.submit() หลังจาก event ได้หรือเปล่าครับ 
|
 |
 |
 |
 |
Date :
2011-02-26 09:16:57 |
By :
webmaster |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
ยังไม่ได้เลยจร้า
|
 |
 |
 |
 |
Date :
2011-02-26 21:24:28 |
By :
Avrill |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
make_autocom("show_arti_topic","h_arti_id");
show_arti_topic นี่คือ form element ที่จะทำ autocomplete
h_arti_id นี่คือ form element ที่จะเก็บ value ที่จะ return กลับมา
ดังนั้นอยากให้มีหลายอันก็ต้องสร้าง ขึ้นมาหลายอัน แค่นั้นเองครับ
Code
make_autocom("get_arti_topic","show_arti_topic","h_arti_id");
make_autocom("get_abc","abc","abc_id");
make_autocom("get_def","def","def_id");
make_autocom("get_hij","hij","hij_id");
จากนั้นโมนิดหน่อย
Code
function make_autocom(action,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 "auto_complete.php?q=" +encodeURIComponent(this.value) + "&action=" + action;
});
ในไฟล์ auto_complete.php ก็ไปรับ $_GET['action'] เพื่อไป switch ในการ select ข้อมูลและ return ค่าที่ต่างกันตามต้องการ
หวังว่าจะเดาความต้องการของคุณถูกนะ
|
ประวัติการแก้ไข 2011-02-26 21:45:43 2011-02-26 21:46:45
 |
 |
 |
 |
Date :
2011-02-26 21:42:17 |
By :
PlaKriM |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
สุดยอดเลยครับพี่ ขอบคุณพี่ PlaKrim มากมายเลยครับ
|
 |
 |
 |
 |
Date :
2012-05-07 12:45:30 |
By :
nprawit |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
$find_field="material_name"; // ฟิลที่ต้องการค้นหา
14.
$sql = "select * from $table_db where locate('$q', $find_field) > 0 order by locate('$q', $find_field), $find_field limit $pagesize";
ในส่วนนี้ ถ้าเราต้องการเพิ่มเงื่อนไขในการ ค้นหาล่ะครับ ปกติจะใช้ where ชื่อฟิล='ค่า' and ชื่อฟิล='ค่า'
แล้วถ้าใช้ where locate แบบข้างบนจะเพิ่มเงื่อนไขอย่างไรครับ
|
 |
 |
 |
 |
Date :
2013-08-05 07:02:29 |
By :
ddsiam |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
|
|
|

|
Load balance : Server 05
|