JQuery Mobile MySQl

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;
}
?>

Votre commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l’aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google

Vous commentez à l’aide de votre compte Google. Déconnexion /  Changer )

Image Twitter

Vous commentez à l’aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l’aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s

Articles récents
Commentaires récents
Catégories
Archives
%d blogueurs aiment cette page :