Jquery Mobile et Autocomplete distant
Bonjour,
j'essaie de faire fonctionner mon script, qui fonctionnait très bien avec le Jquery "normal" mais qui ne fonctionne pas avec Jquery Mobile
je cherche à effectuer un autocomplete depuis une source distante comme celui-ci : http://mobile.jquery-fr.com/demos/wi...te-remote.html
Voici mon script qui fonctionnait bien mais plus sous Jquery Mobile :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
| <div data-role="fieldcontain"><label for="nom">Nom du lieu </label>
<input type="text" required="required" name="nom" tabindex="2" id="nom" value="<?php echo stripslashes($lieu_affiche); ?>" />
</div>
<div data-role="fieldcontain"><label for="ville"></label>
<input type="text" name="ville" id="ville" readonly="yes" value="<?php echo $ville_recupere; ?>"/>
</div>
<div data-role="fieldcontain"><label for="secteur"></label>
<input type="text" name="secteur" id="secteur" readonly="yes" value="<?php echo $secteur_recupere; ?>"/>
</div>
<div data-role="fieldcontain"><label for="maps"></label>
<input type="text" name="maps" id="maps" readonly="yes" value="<?php echo $maps_recupere; ?>" />
</div>
<script type="text/javascript"><!-- DEBUT affichage du lieu -->
$("#nom, #ville, #secteur, #maps").autocomplete({
source: function (request, response)
{ var objData = {};
if ($(this.element).attr('id') == 'nom')
{ objData = { nom: request.term, maxRows: 20 }; }
else
{
objData = { ville: request.term, maxRows: 20 };
objData = { secteur: request.term, maxRows: 20 };
objData = { maps: request.term, maxRows: 20 };
}
$.ajax({
url: "autocompletion2.php",
dataType: "json",
data: objData,
type: 'POST',
success: function (data)
{ response($.map(data, function (item)
{ return { label: item.Nom + " ( " + item.Ville + " ) ",
value: function ()
{ if ($(this).attr('id') == 'nom')
{ $('#ville').val(item.Ville);
$('#secteur').val(item.Secteur);
$('#maps').val(item.Maps);
return item.Nom + " ( " + item.Ville + " )";
return item.Secteur;return item.Maps;
}
else
{ $('#nom').val(item.Nom);return item.ville; }
}
}
}));
}
});
},
minLength: 1, delay: 300
});
</script><!-- FIN affichage du lieu --> |
et le code autocompletion2.php :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
| <?php
function strip_slashes(&$v, $k)
{ $v = stripslashes($v); }
?>
<?php
class AutoCompletion
{public $Nom;public $Ville;public $Secteur;public $Maps;}
//Initialisation de la liste
$list = array();
//Connexion MySQL
require('configuration.php'); // $db dans le fichier !
try {$db;}
catch (Exception $ex)
{echo $ex->getMessage();}
//Construction de la requete
$strQuery = "SELECT nom Nom, ville Ville, secteur Secteur, maps Maps FROM lieu WHERE ";
if (isset($_POST["nom"]))
{$strQuery .= "nom LIKE :nom ";}
else { $strQuery .= "ville LIKE :ville "; $strQuery .= "secteur LIKE :secteur "; $strQuery .= "maps LIKE :maps "; }
if (isset($_POST["maxRows"])) //Limite
{ $strQuery .= "LIMIT 0, :maxRows"; }
$query = $db->prepare($strQuery);
if (isset($_POST["nom"]))
{ $value = "%".$_POST["nom"]."%"; $query->bindParam(":nom", $value, PDO::PARAM_STR); }
else
{ $value = $_POST["ville"]."%";
$query->bindParam(":ville", $value, PDO::PARAM_STR);
$value = $_POST["secteur"]."%";
$query->bindParam(":secteur", $value, PDO::PARAM_STR);
$value = $_POST["maps"]."%";
$query->bindParam(":maps", $value, PDO::PARAM_STR);
}
if (isset($_POST["maxRows"])) //Limite
{ $valueRows = intval($_POST["maxRows"]); $query->bindParam(":maxRows", $valueRows, PDO::PARAM_INT); }
$query->execute();
$list = $query->fetchAll(PDO::FETCH_ASSOC);
array_walk_recursive($list, 'strip_slashes');
echo json_encode($list);
?> |
