Résultat à obtenir :
Affichage d’une case de saisie vide, lorsque l’on tape des caractères une liste apparaît provenant d’une base Mysql. Le click sur un élément de la liste rempli le champ de recherche avec la valeur cliquée. La validation de la page renvoie les paramètres à la Pebble.
Le code de la page HTML :
<!DOCTYPE html> <html> <head> <title>Autocomplete Example</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script> </head> <body> <div data-role="page" id="mainPage"> <div data-role="header"> <h1>Autocomplete MySql</h1> </div> <div data-role="content"> <p> <input type="text" id="searchField" placeholder="Search"> <ul id="suggestions" data-role="listview" data-inset="true"></ul> </p> </div> <div data-role="footer"> <h4></h4> </div> <div class="ui-grid-a"> <div class="ui-block-a"> <button type="submit" data-theme="d" id="b-cancel">Cancel</button> </div> <div class="ui-block-b"> <button type="submit" data-theme="a" id="b-submit">Submit</button> </div> </div> </div> <script> //-- Déclaration des variables var scdedept=""; var slibdept=""; var sugList = $("#suggestions"); //-- Gestion de l'autocomplétion $("#mainPage").on("pageshow", function(e) { //-- Pour Débug : console.log("Attente saisie car à rechercher"); //-- Evénement : Si saisie de caractères $("#searchField").on("input", function(e) { var text = $(this).val(); //-- Si pas de car alors on efface la liste if(text.length < 1) { sugList.html(""); sugList.listview("refresh"); } else { //-- Appel page PHP avec la variable term contenant le texte saisi ?term=text $.get("http://<votresite>/auto.php", {term:text}, function(res,code) { var str = ""; for(var i=0, len=res.length; i<len; i++) { //-- Remplissage tableau avec résultat requête plus les balises HTML pour le click str += '<li><a href="javascript:garedepart('+"'"+res[i]+"','"+res[i]+"'"+')">'+res[i]+"</a></li>"; } //-- On place dans la liste le code HTML généré sugList.html(str); sugList.listview("refresh"); },"json"); } }); }); //-- Gestion du clic sur la liste function garedepart(slib,scode) { //-- Affichage de la valeur sélectionnée dans le champ serach document.getElementById("searchField").value = slib; //-- Vidage de la liste sugList.html(""); sugList.listview("refresh"); //-- Pour Debug : alert("Code="+scode+" ; Libellé="+slib); scdedept=scode; slibdept=slib;} //-- Gestion du renvoi de la sélection à la pebble function saveOptions() { var options = { 'codedepart' : scdedept, 'libdepart' : slibdept } return options; } $().ready(function() { $("#b-cancel").click(function() { console.log("Cancel"); document.location = "pebblejs://close"; }); $("#b-submit").click(function() { console.log("Submit"); var location = "pebblejs://close#" + encodeURIComponent(JSON.stringify(saveOptions())); console.log("Warping to: " + location); console.log(location); document.location = location; }); }); </script> </body> </html>
Le code PHP :
<?php //-- Récupération de la variable contenant les caractères à rechercher $term = $_GET["term"]; if (isset($term)){ //-- Déclaration et formatage en %valeur% $term='"%'.$term.'%"'; $return_arr = array(); //-- Connection à la base MySql try { $db = mysql_connect('url_mys_sql', 'login', 'pass'); //-- Sélection de la base de données mysql_select_db('b33_14850020_fetes',$db); //-- Création de la requête SQL $sql = "SELECT `prenoms` FROM `wp_nameday` WHERE `prenoms` LIKE ".$term; //-- Envoie de la requête $req = mysql_query($sql) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error()); //-- Récupération des données while($row = mysql_fetch_assoc($req)){ $return_arr[] = $row['prenoms']; } } catch(PDOException $e) { echo 'ERROR: ' . $e->getMessage(); } $str=json_encode($return_arr); $res=str_replace(",null", "",$str); //-- Retourne les données au format JSON echo $res; } ?>
Andro Pebble 
Votre commentaire