11540 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Autocomplete avec free

Bonjour et bonne année Smiley lol !

je cherche à faire un autocomplete
L'idée c'est qu'en sélectionnant un nom dans la liste (utilisation de MYSQL) , le mail soit automatiquement sélectionné dans un input hidden.
Jquery autocomplete propose des examples avec Json. Mais ca ne fonctionne pas avec Free. Version PHP trop ancienne.
Y'a t'il un autre moyen sans utiliser json ?
J'ai cherché en vain pour l'instant.
Merci beaucoup si vous pouvez me mettre sur la voie
Je tente en XML. Mais petit soucis. Je n'arrive pas à mettre la valeur "mail" dans l'input hidden. Ca marche si c'est une div à la place de l'input.

J'ai remplacé 

 $( "<div/>" ).text( message ).prependTo( "#log" );


par 

 $( "<input>" ).text( message ).prependTo( "#log" );


mais ça ne fonctionne pas.

Merci de votre aide ! Smiley ohwell 




<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Autocomplete - XML data parsed once</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
	<link rel="stylesheet" href="demos/demos.css">

	<script>
	$(function() {
		function log( message ) {
			$( "<div/>" ).text( message ).prependTo( "#log" );

		}

		$.ajax({
			url: "membres.xml",
			dataType: "xml",
			success: function( xmlResponse ) {
				var data = $( "membres", xmlResponse ).map(function() {
					return {
						value: $( "nom", this ).text(),
						id: $( "mail", this ).text()
					};
				}).get();
				
				$( "#report" ).autocomplete({
					source: data,
					minLength: 2,
					select: function( event, ui ) {
						log( ui.item ? "" + ui.item.id : "" + this.value );
					}
				});
			}
		});
	});
	</script>
</head>
<body>

<div class="ui-widget">
	<label for="report">Noms: </label>
	<input id="report" />
</div>

<input id="log" type="hidden"/>
	



</body>
</html>

Modifié par daggoon (07 Jan 2013 - 00:12)
J'ai enfin trouvé la solution !




<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Autocomplete - XML data parsed once</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
	<link rel="stylesheet" href="demos/demos.css">

	<script>
	$(function() {
		function log( message ) {
		
                           $( "#log" ).val(message);

		}

		$.ajax({
			url: "membres.xml",
			dataType: "xml",
			success: function( xmlResponse ) {
				var data = $( "membres", xmlResponse ).map(function() {
					return {
						value: $( "nom", this ).text(),
						id: $( "mail", this ).text()
					};
				}).get();
				
				$( "#report" ).autocomplete({
					source: data,
					minLength: 2,
					select: function( event, ui ) {
						log( ui.item ? "" + ui.item.id : "" + this.value );
					}
				});
			}
		});
	});
	</script>
</head>
<body>

<div class="ui-widget">
	<label for="report">Noms: </label>
	<input id="report" />
</div>

<input id="log" type="hidden"/>
	



</body>
</html>
Sujet clos
Aller à