JQuery Local List

Une zone d’affichage suivie par une liste sélectionnable :

<!DOCTYPE html>
<html>
<head>
<title>Local List</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 Local</h1>
    </div>
    <div data-role="content">
        <p>
         <input id="prenom" name="prenom" value="" readonly="readonly" />
         <ul id="listevaleurs" data-role="listview" data-filter="true" 
               data-filter-reveal="true" data-filter-placeholder="Prénom..." 
               data-inset="true" >
         <li class="ui-screen-hidden"><a href="javascript:resclick('0','Cyril')">Cyril</a></li> 
         <li class="ui-screen-hidden"><a href="javascript:resclick('1','Veronique')">Veronique</a></li> 
         <li class="ui-screen-hidden"><a href="javascript:resclick('2','Silvain')">Silvain</a></li>  
         <li class="ui-screen-hidden"><a href="javascript:resclick('3','Guillaume')">Guillaume</a></li> 
        </p>
    </div>
    <div data-role="footer">
        <h4></h4>
    </div>
</div>
<script>
 //-- Gestion du clic sur la liste 
 function resclick(scode,slib) {
	//-- Affichage de la valeur sélectionnée dans le champ prévu
	prenomchoisi='Prenom : '+slib
    document.getElementById('prenom').value = prenomchoisi;
    }
</script>
</body>
</html>

Amélioration : liste en local : (le code est ici)

<!DOCTYPE html>
<html>
<head>
<title>Local List</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 Local</h1>
    </div>
    <div data-role="content">
        <p>
         <input id="prenom" name="prenom" value="" readonly="readonly" />
         <ul id="listevaleurs" data-role="listview" data-filter="true" 
               data-filter-reveal="true" data-filter-placeholder="Prénom..." 
               data-inset="true" >

        </p>
    </div>
    <div data-role="footer">
        <h4></h4>
    </div>
</div>
<script>
 var baseprenom = [{
        "code": '0',
        "prenom": 'Guillaume'}, {
        "code": '1',
        "prenom": 'Cyril'}, {
        "code": '2',
        "prenom": 'Véronique'}, {
        "code": '3',
        "prenom": 'Silvain'}]
$(document).on("pageinit", "#mainPage", function () {
    //set up string for adding <li/>
    var li = "";
    //container for $li to be added
    $.each(baseprenom, function (i, prenom) {
        li += '<li class="ui-screen-hidden"><a href="javascript:resclick('+"'"+i+"','"+prenom.prenom+"'"+')">'+prenom.prenom+'</a></li>'; 
        //console.log('<li class="ui-screen-hidden"><a href="javascript:resclick('+"'"+i+"','"+prenom.prenom+"'"+')">'+prenom.prenom+'</a></li>');
    }); 
    //-- Ajout des lignes dans la liste
    $("#listevaleurs").append(li).promise().done(function () {	
	//--Refresh pour appliquer le style
    $(this).listview("refresh");
	});
 });
       					
 //-- Gestion du clic sur la liste 
 function resclick(scode,slib) {
	//-- Affichage de la valeur sélectionnée dans le champ prévu
	prenomchoisi='Prenom : '+slib
    document.getElementById('prenom').value = prenomchoisi;
    //-- On efface la liste
    $("#listevaleurs").html("");
    //-- Remplissage de la liste
    var li = "";
    $.each(baseprenom, function (i, prenom) {
        li += '<li class="ui-screen-hidden"><a href="javascript:resclick('+"'"+i+"','"+prenom.prenom+"'"+')">'+prenom.prenom+'</a></li>'; 
        //console.log('<li class="ui-screen-hidden"><a href="javascript:resclick('+"'"+i+"','"+prenom.prenom+"'"+')">'+prenom.prenom+'</a></li>');
    }); 
    //-- Ajout des lignes dans la liste
    $("#listevaleurs").append(li).promise().done(function () {	
	//--Refresh pour appliquer le style
    $(this).listview("refresh");
	});
    
  }
</script>
</body>
</html>

Dernière version (affichage de la zone de résultat uniquement si click sur valeur ) :

Le code est ici

 <!DOCTYPE html>  
 <html>  
 <head>  
 <title>Local List</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 Local</h1>  
   </div>  
   <div data-role="content">  
     <p>  
  <input id="prenom" name="prenom" value="" readonly="readonly" type="hidden"/>  
      <ul id="listevaleurs" data-role="listview" data-filter="true"   
         data-filter-reveal="true" data-filter-placeholder="Prénom..."   
         data-inset="true" >  
     </p>  
   </div>  
   <div data-role="footer">  
     <h4></h4>  
   </div>  
 </div>  
 <script>  
  var baseprenom = [{  
     "code": '0',  
     "prenom": 'Guillaume'}, {  
     "code": '1',  
     "prenom": 'Cyril'}, {  
     "code": '2',  
     "prenom": 'Véronique'}, {  
     "code": '3',  
     "prenom": 'Silvain'}]  
 $(document).on("pageinit", "#mainPage", function () {  
   //set up string for adding <li/>  
   var li = "";  
   //container for $li to be added  
   $.each(baseprenom, function (i, prenom) {  
     li += '<li class="ui-screen-hidden"><a href="javascript:resclick('+"'"+i+"','"+prenom.prenom+"'"+')">'+prenom.prenom+'</a></li>';   
     //console.log('<li class="ui-screen-hidden"><a href="javascript:resclick('+"'"+i+"','"+prenom.prenom+"'"+')">'+prenom.prenom+'</a></li>');  
   });   
   //-- Ajout des lignes dans la liste  
   $("#listevaleurs").append(li).promise().done(function () {       
      //--Refresh pour appliquer le style  
   $(this).listview("refresh");  
      });  
  });  
  //-- Gestion du clic sur la liste   
  function resclick(scode,slib) {  
      //-- Affichage de la valeur sélectionnée dans le champ prévu  
      prenomchoisi='Prenom : '+slib  
      $("#prenom").textinput({ theme: "a" });  
      document.getElementById('prenom').type = "";  
   document.getElementById('prenom').value = prenomchoisi;  
   //-- On efface la liste  
   $("#listevaleurs").html("");  
   //-- Remplissage de la liste  
   var li = "";  
   $.each(baseprenom, function (i, prenom) {  
     li += '<li class="ui-screen-hidden"><a href="javascript:resclick('+"'"+i+"','"+prenom.prenom+"'"+')">'+prenom.prenom+'</a></li>';   
     //console.log('<li class="ui-screen-hidden"><a href="javascript:resclick('+"'"+i+"','"+prenom.prenom+"'"+')">'+prenom.prenom+'</a></li>');  
   });   
   //-- Ajout des lignes dans la liste  
   $("#listevaleurs").append(li).promise().done(function () {       
      //--Refresh pour appliquer le style  
   $(this).listview("refresh");  
      });  
  }  
 </script>  
 </body>  
 </html>  

Répondre

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 :