การใช้งาน jQuery Mobile ร่วมกับ PHP และ MySQL

Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
Ik Kat
PHP Super Member
PHP Super Member
โพสต์: 291
ลงทะเบียนเมื่อ: 26/06/2017 2:32 pm

การใช้งาน jQuery Mobile ร่วมกับ PHP และ MySQL

โพสต์โดย Ik Kat » 28/06/2017 4:39 pm

ก่อนอื่นนั้นเราต้องทำการดาวน์โหลดไฟล์ jQuery Mobile หากยังไม่เคยใช้งานมาก่อนสามารถดู วิธีการใช้งาน jQuery Mobile เบื้องต้น ได้ และเมื่อดาวน์โหลดมาแล้วก่อนอื่นเราต้องวางแผนก่อนว่าจะทำระบบหรือหน้าเว็บเพจใดบ้าง ในส่วนนี้เราจะยกตัวอย่างการทำ Autocomplete จาก MySQL กันค่ะ

MT19 28-6-60(41).png
autocomplete
MT19 28-6-60(41).png (22.24 KiB) เปิดดู 15 ครั้ง

ตัวอย่างการทำ Autocomplete : http://demos.jquerymobile.com/1.4.0/lis ... te-remote/

JavaScript :

โค้ด: เลือกทั้งหมด

<script>
    $( document ).on( "pageinit", "#test", function() {
    $( "#autocomplete" ).on( "filterablebeforefilter", function ( e, data ) {
        var $ul = $( this ),
            $input = $( data.input ),
            value = $input.val(),
            html = "";
        $ul.html( "" );
        if ( value && value.length > 2 ) {
            $ul.html( "<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>" );
            $ul.listview( "refresh" );
            $.ajax({
                 url: "search2.php",
                 dataType: "jsonp",
                 crossDomain: true,
                 data: {
                    term: $input.val()
                }
            })
            .then( function ( response ) {
                $.each( response, function ( i, val ) {
                    html += "<li>" + val.value + "</li>";
                });
                $ul.html( html );
                $ul.listview( "refresh" );
                $ul.trigger( "updatelayout");
            });
        }
    });
});


PHP :

โค้ด: เลือกทั้งหมด

<?php
$q = strtolower($_GET["term"]);
require_once("res/mysql-connect.php");
$return = array();
if (!$resultado = $mysqli->query("SELECT * FROM projects limit 10"))
                 {                 
                    echo "Fail SQL:" . $mysqli->errno . ") " . $mysqli->error;                                   
                 }
                 else
                 {
$resultado->data_seek(0);
while ($fila = $resultado->fetch_assoc())
                 {
                     array_push($return, array(
        'label'      => $fila['project_name'],
        'value'    => $fila['project_id']) );
                 }

echo(json_encode($return));
}
?>


HTML :

โค้ด: เลือกทั้งหมด

<body>
<div data-role="page" id="test">
<div data-role="header">
        <h1><? echo $labels['MAIN_PLURAL']; ?></h1>
        <a href="#menupanel" class="ui-btn-right">Opciones</a>
    </div><!-- /header -->

    <div role="main" class="ui-content">
        <h3>Cities worldwide</h3>
<p>After you enter <strong>at least three characters</strong> the autocomplete function will show all possible matches.</p>
<ul id="autocomplete" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Find a city..." data-filter-theme="a"></ul>
        <span style="float:right"><label for="province"><?php echo 'Conectado como ' . $_SESSION['username']?></label></span>       
    </div><!-- /content -->

    <div data-role="footer" data-position="right">                                                                 
    <h1></h1>
    <a href="./admin/cmd.php?cmd=logout" data-ajax="false" class="ui-btn-right ui-corner-all" style="margin: 0;">Salir</a>   
    </div><!-- /footer -->
</div><!-- /page -->

</body>


var_dump($return) if I open search2.php

โค้ด: เลือกทั้งหมด

array (size=10)
  0 =>
    array (size=2)
      'label' => string 'VEGA DE SAN JOSÉ' (length=17)
      'value' => string '1' (length=1)
  1 =>
    array (size=2)
      'label' => string 'PARQUE DE CASABLANCA I ' (length=23)
      'value' => string '2' (length=1)
  2 =>
    array (size=2)
      'label' => string 'PLAZA DE MIGUEL ANGEL BLANCO' (length=28)
      'value' => string '3' (length=1)
  3 =>
    array (size=2)
      'label' => string 'EL LASSO II' (length=11)
      'value' => string '4' (length=1)
  4 =>
    array (size=2)
      'label' => string 'PLAZA TENDERETE' (length=15)
      'value' => string '5' (length=1)
  5 =>
    array (size=2)
      'label' => string 'PARQUE GLORIA FUERTES' (length=21)
      'value' => string '6' (length=1)
  6 =>
    array (size=2)
      'label' => string 'LOS TARAHALES I' (length=15)
      'value' => string '7' (length=1)
  7 =>
    array (size=2)
      'label' => string 'JARDINES DE CASABLANCA III' (length=26)
      'value' => string '8' (length=1)
  8 =>
    array (size=2)
      'label' => string 'LOMO APOLINARIO' (length=15)
      'value' => string '9' (length=1)
  9 =>
    array (size=2)
      'label' => string 'CASABLANCA II' (length=13)
      'value' => string '10' (length=2)


ในส่วนนี้เรามีการตั้งค่าโดยการกำหนดให้ตัวอักษรที่ใส่ในช่อง Autocomplete ไม่เกินสามตัว หากเกินจะไม่แสดงผล

ข้อมูลจาก : https://stackoverflow.com/questions/30540043/jquery-mobile-autocomplete-from-mysql

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 3 และ บุคคลทั่วไป 0 ท่าน