|
 |
| |
สอบถามครับ autocomplete กำหนดการค้นหาทั้ง 2ฟิล ครับ |
| |
 |
|
|
 |
 |
|
ผมกำลังทำระบบขายสินค้าครับ ค้นหาสินค้าที่จะขายแบบ autocomplete จากชื่อสินค้า แต่ผมอยากเพิ่มการค้นหาด้วย barcode โดยการยิง barcode จากโค้ดผมต้องเพิ่มส่วนไหนครับ ขอบคุณครับ
Code (PHP)
<?php
header("Content-type:application/json; charset=UTF-8");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
// ส่วนของการเชิ่อมต่อกับฐานข้อมูล
mysql_connect("localhost","root","12345678") or die("Cannot connect the Server");
mysql_select_db("ok") or die("Cannot select database");
mysql_query("set character set utf8");
?>
<?php
$pagesize = 50; // จำนวนรายการที่ต้องการแสดง
$table_db="product"; // ตารางที่ต้องการค้นหา
$find_field1="product_name"; // ฟิลที่ต้องการค้นหา
$find_field2="product_barcode"; // ฟิลที่ต้องการค้นหา
if($_GET['term']!=""){
$q = $_GET["term"];
$sql = "select * from $table_db
where locate('$q', $find_field1) OR locate('$q', $find_field2)
order by locate('$q', $find_field1), $find_field1 limit $pagesize";
}else{
$sql = "select * from $table_db where 1 limit $pagesize";
}
$qr=mysql_query($sql);
$total=mysql_num_rows($qr);
while($rs=mysql_fetch_array($qr)) {
$json_data[]=array(
"id"=>$rs['product_id'],
"label"=>$rs['product_name'],
"value"=>$rs['product_name'],
);
}
$json= json_encode($json_data);
echo $json;
mysql_close();
exit;
?>
Code (PHP)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/pepper-grinder/jquery-ui.css" />
<style type="text/css">
body {
font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
font-size:12px;
}
#input_q{
width:150px;
}
/* css ส่วนของรายการที่แสดง */
.ui-autocomplete {
padding-right: 5px;
max-height:200px !important;
overflow: auto !important;
}
/* css ส่วนปุ่มคลิกเลือกแสดงรายการทั้งหมด*/
.showAll_btn{
position: relative;
top: -2px;
border:0px solid;
font-size: 10px;
height: 23px;
width: 25px;
}
</style>
</head>
<body>
<div style="margin:auto;width:80%;">
<br><br>
<form id="form001" name="form001" method="post" action="">
<div>Tags:
<input name="input_q" id="input_q" size="50" autofocus>
<button type="button" class="showAll_btn">V</button>
<!-- ส่วนสำหรับกำหนดค่า id ของรายการที่เลือก เพื่อไปใช้งาน-->
<input name="h_input_q" type="hidden" id="h_input_q" value="" />
</div>
</form>
<pre>
<?php
// ส่วนทดสอบแสดงค่า เมื่อกดปุ่มส่งข้อมูล
if(count($_POST)>0){
print_r($_POST);
}
?>
</pre>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
$( "#input_q" ).autocomplete({ // ใช้งาน autocomplete กับ input text id=tags
minLength: 0, // กำหนดค่าสำหรับค้นหาอย่างน้อยเป็น 0 สำหรับใช้กับปุ่ใแสดงทั้งหมด
source: "search.php", // กำหนดให้ใช้ค่าจากการค้นหาในฐานข้อมูล
open:function(){ // เมื่อมีการแสดงรายการ autocomplete
var valInput=$(this).val(); // ดึงค่าจาก text box id=tags มาเก็บที่ตัวแปร
if(valInput!=""){ // ถ้าไม่ใช่ค่าว่าง
$(".ui-menu-item a").each(function(){ // วนลูปเรียกดูค่าทั้งหมดใน รายการ autocomplete
var matcher = new RegExp("("+valInput+")", "ig" ); // ตรวจสอบค่าที่ตรงกันในแต่ละรายการ กับคำค้นหา
var s=$(this).text();
var newText=s.replace(matcher, "<b>$1</b>"); // แทนค่าที่ตรงกันเป็นตัวหนา
$(this).html(newText); // แสดงรายการ autocomplete หลังจากปรับรูปแบบแล้ว
});
}
},
select: function( event, ui ) {
// สำหรับทดสอบแสดงค่า เมื่อเลือกรายการ
console.log( ui.item ?
"Selected: " + ui.item.label :
"Nothing selected, input was " + this.value);
$("#h_input_q").val(ui.item.id); // เก็บ id ไว้ใน hiden element ไว้นำค่าไปใช้งาน
setTimeout(function(){
$("#h_input_q").parents("form").submit(); // เมื่อเลือกรายการแล้วให้ส่งค่าฟอร์ม ทันที
},500);
}
});
$(".showAll_btn").click(function(){
// ตรวจสอบถ้ามีการแสดงรายการทั้งหมดอยู่แล้ว
if ($( "#input_q" ).autocomplete( "widget" ).is( ":visible" ) ) {
$( "#input_q" ).autocomplete( "close" ); // ปิดการแสดงรายการทั้งหมด
return;
}
// ส่งค่าว่างปล่าวไปทำการค้นหา จะได้ผลลัพธ์เป็นรายการทั้งหมด
$( "#input_q" ).autocomplete( "search", "" );
$( "#input_q" ).focus(); //ให้ cursor ไปอยู่ที่ input text id=tags
});
});
</script>
</body>
</html>
Tag : PHP, MySQL
|
|
|
 |
 |
 |
 |
| Date :
2016-08-16 11:43:32 |
By :
hnu25 |
View :
1304 |
Reply :
3 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
รับค่าจากช่องค้นหาเหมือนเดิม ใน sql เติม OR เข้าไปค้นหาที่ฟิลด์ที่เก็บบาร์โค๊ดครับ
|
| |
|
|
| |
| Date :
2016-08-16 13:45:40 |
By :
Dragons_first |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
sql เติม OR ไม่ต้อง เพราะคนละประเด็น
เครื่องอ่าน Barcode จะมี Enter ต่อท้ายเสมอ
ดังนั้นคุณตัดคำว่า Autocomplete จากความคิดของคุณก่อน
เพราะ autocomplete เป็นการ suggest ตาม keyword ที่คีย์เข้าไป
แต่การใช้ Barcode Scanner เป็นกาค้นหาข้อมูลจาก field barcode
หลักการก็แล้วแต่ Algorithm ของใครของมัน
ส่วนตัวผมเองใช้ barcode รับค่ามาแล้วไปค้นหาข้อมูล หากเจอก็ return json กลับมาแล้วค่อยนำดำเนินการต่อใน process ถัดไป
|
| |
|
|
| |
| Date :
2016-08-18 08:48:54 |
By :
fossil31 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ได้แล้วครับ ขอบคุณครับ
|
| |
|
|
| |
| Date :
2016-08-18 12:23:12 |
By :
hnu25 |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 02
|
