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>
Andro Pebble 
Votre commentaire