 |
|
ผมกำลังทำระบบขายสินค้าครับ ค้นหาสินค้าที่จะขายแบบ 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 :
1358 |
Reply :
3 |
|
 |
 |
 |
 |
|
|
|
|
 |
