ก่อนอื่นนั้นเราต้องทำการดาวน์โหลดไฟล์
jQuery Mobile หากยังไม่เคยใช้งานมาก่อนสามารถดู
วิธีการใช้งาน jQuery Mobile เบื้องต้น ได้ และเมื่อดาวน์โหลดมาแล้วก่อนอื่นเราต้องวางแผนก่อนว่าจะทำระบบหรือหน้าเว็บเพจใดบ้าง ในส่วนนี้เราจะยกตัวอย่างการทำ
Autocomplete จาก
MySQL กันค่ะ
- autocomplete
- MT19 28-6-60(41).png (22.24 KiB) Viewed 1528 times
ตัวอย่างการทำ 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/305 ... from-mysql
ก่อนอื่นนั้นเราต้องทำการดาวน์โหลดไฟล์ [url=https://www.mindphp.com/forums/viewtopic.php?f=78&t=40733]jQuery Mobile[/url] หากยังไม่เคยใช้งานมาก่อนสามารถดู [url=https://www.mindphp.com/forums/viewtopic.php?f=78&t=40735]วิธีการใช้งาน jQuery Mobile[/url] เบื้องต้น ได้ และเมื่อดาวน์โหลดมาแล้วก่อนอื่นเราต้องวางแผนก่อนว่าจะทำระบบหรือหน้าเว็บเพจใดบ้าง ในส่วนนี้เราจะยกตัวอย่างการทำ [url=https://www.mindphp.com/forums/viewtopic.php?f=72&t=23637]Autocomplete[/url] จาก [url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2088-sql-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html]MySQL[/url] กันค่ะ
[attachment=0]MT19 28-6-60(41).png[/attachment]
[b]ตัวอย่างการทำ Autocomplete :[/b] http://demos.jquerymobile.com/1.4.0/listview-autocomplete-remote/
JavaScript :
[code]<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");
});
}
});
});[/code]
PHP :
[code]<?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));
}
?>[/code]
HTML :
[code]<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>[/code]
var_dump($return) if I open search2.php
[code]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)[/code]
ในส่วนนี้เรามีการตั้งค่าโดยการกำหนดให้ตัวอักษรที่ใส่ในช่อง [b]Autocomplete[/b] ไม่เกินสามตัว หากเกินจะไม่แสดงผล
ข้อมูลจาก : [url]https://stackoverflow.com/questions/30540043/jquery-mobile-autocomplete-from-mysql[/url]