Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,038

HOME > PHP > PHP Forum > สอบถามครับ autocomplete กำหนดการค้นหาทั้ง 2ฟิล ครับ

[PHP] สอบถามครับ autocomplete กำหนดการค้นหาทั้ง 2ฟิล ครับ

เริ่มหัวข้อใหม่

phat

โพสกระทู้ ( 72 )
บทความ ( 0 )

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

Reply : 3

No. 1

หมาของเซสชั่น

โพสกระทู้ ( 3,750 )
บทความ ( 0 )

รับค่าจากช่องค้นหาเหมือนเดิม ใน sql เติม OR เข้าไปค้นหาที่ฟิลด์ที่เก็บบาร์โค๊ดครับ

Date : 2016-08-16 13:45:40

By : Dragons_first

No. 2

xMan

โพสกระทู้ ( 484 )
บทความ ( 3 )

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

No. 3

phat

โพสกระทู้ ( 72 )
บทความ ( 0 )

ได้แล้วครับ ขอบคุณครับ

Date : 2016-08-18 12:23:12

By : hnu25

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : สอบถามครับ autocomplete กำหนดการค้นหาทั้ง 2ฟิล ครับ

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก

<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)

Load balance : Server 04

Registered : 109,038