ตัวอย่างการทำ 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
$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));
}
?>
โค้ด: เลือกทั้งหมด
<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>
โค้ด: เลือกทั้งหมด
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)
ข้อมูลจาก : https://stackoverflow.com/questions/305 ... from-mysql