Creation d'un autocomplete jquery avec un code source asp et ajax

Soyez le premier à donner votre avis sur cette source.

Snippet vu 16 639 fois - Téléchargée 18 fois

Contenu du snippet

Je me suis inspirer d'un code existant, ce code source existe pour le php.
Comme j'ai pas mal galéré pour le créer en asp, je me suis dis que je vais le poster afin que d'autre personne ne galère pas autant que moi lol. je crée un autocomplete se connectant à une base de données en sql server

Source / Exemple :


Voila la page test.asp. Sur cette page on créer l'input pour l'autocomplete.
Sur cette page on fait reference à la source JQuery. J'utilise le pack complet afin d'avoir toutes les disponibiltés de JQuery (www.JQuery.com, je vous conseille d'y allez faire un tour).

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Auto complete</title>
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script>
	function lookup(inputString) {
		if(inputString.length == 0) {
			// Hide the suggestion box.
			$('#suggestions').hide();
		} else { 
			$.post('autocomplete.asp', {queryString: ""+inputString+""}, function(data){
					if(data.length >0) {
					$('#suggestions').show();
					$('#autoSuggestionsList').html(data);
				}
			});
		}
	} // lookup
	
	function fill(thisValue) {
		$('#inputString').val(thisValue);
		setTimeout("$('#suggestions').hide();", 200);
	}
</script>

<style type="text/css">
	body {
		font-family: Helvetica;
		font-size: 11px;
		color: #000;
	}
	
	h3 {
		margin: 0px;
		padding: 0px;	
	}

	.suggestionsBox {
		position: relative;
		left: 30px;
		margin: 10px 0px 0px 0px;
		width: 200px;
		background-color: #212427;
		-moz-border-radius: 7px;
		-webkit-border-radius: 7px;
		border: 2px solid #000;	
		color: #fff;
	}
	
	.suggestionList {
		margin: 0px;
		padding: 0px;
	}
	
	.suggestionList li {
		
		margin: 0px 0px 3px 0px;
		padding: 3px;
		cursor: pointer;
	}
	
	.suggestionList li:hover {
		background-color: #659CD8;
	}
</style>

</head>

<body>

	<div>
		<form>
			<div>
				Type your county:
				<br />
				<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
			</div>
			
			<div class="suggestionsBox" id="suggestions" style="display: none;">
				<img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" width="10" height="10" />
				<div class="suggestionList" id="autoSuggestionsList">
				</div>
			</div>
		</form>
	</div>

</body>

</html>

Pui nous avant la page AJAX autocomplete.asp. Sur cette page, je recuopere le name de l'input puis je fais mon recordset. Les données qui correspondent à la recherche sont listées

<!--#include file="Connexion/connexion.asp"-->
<html>
<body>
<%	  
Dim  rs
Dim Titre  	 
' On récupère le prametre envoyer par le formulaire
Titre = request.form("queryString")	
' On fait le filtre en SQL	 
SQL = "Select * From [Table] WHERE [Champ] Like '" & Titre & "%'"	
'Connection a la bd et recordset
Set rs = Server.CreateObject("ADODB.Recordset")
'Ouverture du premier recordset
rs.Open SQL, conn,3,3
response.write("<ul>") 
Do While Not rs.EOF	
'On liste le recordset dans une liste
     response.write("<li  onClick=fill('"&rs("DescripTitre")& "')> " &rs("DescripTitre") &"</li>")
	   'response.write(rs("DescripTitre")) 
	   rs.movenext
loop
 response.write("</ul>") 
conn.close
set conn = nothing
%>

Conclusion :


Ce code source vaut ce qu'il vaut, mais il me rend bien des services. Si vous voulez l'améliorer n'hésitez pas.
Merci pour votre aide et vos commentaires.

A voir également

Ajouter un commentaire

Commentaires

dedebis84
Messages postés
29
Date d'inscription
vendredi 25 août 2006
Statut
Membre
Dernière intervention
20 juin 2012
-
En fait il faut que ton fichier rcp.php créer un fichier au json. Tu vas sur google et tu marques json tu vas trouver des aides.
En fait ce ficher va te fournit a liste autocomplete.
Il doit avoir des exemples de création en php.
djbenji666
Messages postés
3
Date d'inscription
vendredi 16 novembre 2007
Statut
Membre
Dernière intervention
20 juin 2012
-
... rien compris la mdr ^^
dedebis84
Messages postés
29
Date d'inscription
vendredi 25 août 2006
Statut
Membre
Dernière intervention
20 juin 2012
-
Tu peux utiliser firebug pour voir ou ca pete.Je connais assze mal le php.
Tu peux deja si rcp.php créer un fichier au format jason.
djbenji666
Messages postés
3
Date d'inscription
vendredi 16 novembre 2007
Statut
Membre
Dernière intervention
20 juin 2012
-
Bonjour en faite je ne développe pas vraiment je me serre de boue de code pour construire et aller au boue de ce que je veux ^^. j'ai le site www.telecharger-mp3-gratuit.com et je voudrai integré ceci dans mon moteur de recherche principale

code de ma page index.php

[<?= WEB_PATH?> images/logo_big.png" alt="Home"/>]</h1>

<!-- start for Search by Artist -->

[recherche-artiste.php Recherche un mp3 par artiste
]

<!-- End for Search by Artist -->

<center>

<? if(($type == "mp3")||($type=="")) { echo "<li> ".$lang['53']." </li> "; } else { echo "<li>[<? =WEB_PATH?>register.php
</map>

<? } ?>

<center>Bientot sur le groupe de site telecharger gratuit, l'arriver du telechargement de video youtube gratuit !
</center>

]&title=<?=$settings[site_title]?>">images/submit.jpg" alt="Submit" />
[http://digg.com/submit?phase=2&url=<?=WEB_PATH?>&title=<?=$settings[site_title]?> images/submit_02.jpg" alt="Submit" />]
[http://digg.com/submit?url=<?=WEB_PATH?>&title=<?=$settings[site_title]?> images/digg.jpg" alt="Digg" />]
[http://www.stumbleupon.com/submit?url=<?=WEB_PATH?>&title=<?=$settings[site_title]?> images/stumble.jpg" alt="Stumble" /> Stumble]
<?php if($settings['sharethis']) { ?>
<script type="text/javascript" src="http://w.sharethis.com/widget/?tabs=web%2Cpost%2Cemail&charset=utf-8&style=rotate&publisher=<?=$settings['sharethis'];?>"></script>
<? } ?>

<center>
https://www.facebook.com/pages/telecharger-mp3-gratuitcom/236195016454977 |
Tweeter |
[javascript:ajaxpage('popular-searches.php?type=<?=$type?>', 'boxes'); <?=$lang['66'];?>] |
[javascript:ajaxpage('top-users.php', 'boxes'); <?=$lang['67'];?>] |
[javascript:ajaxpage('embed-search.php', 'boxes'); <?=$lang['68'];?>][ [?]]

</center>


<?php
$result = mysql_query("SELECT tag AS tag, COUNT(*) AS quantity FROM tags GROUP BY tag ORDER BY rand() DESC LIMIT 15");
while ($row mysql_fetch_array($result)) { $tags[$row['tag']] $row['quantity']; }

$max_size = 30;
$min_size = 10;

$max_qty = max(array_values($tags));
$min_qty = min(array_values($tags));

$spread = $max_qty - $min_qty;
if (0 $spread) { $spread 1; }

$step = ($max_size - $min_size)/($spread);

echo "

".$lang['66']."
";

foreach ($tags as $key => $value)
{
$size = $min_size + (($value - $min_qty) * $step);
$key = urldecode($key);
$keyx = urldecode(str_replace(" ", "-", $key));

echo "".$key." ";
}

echo "

";
?>



<?=$ads['bottom'];?>

ce que je cherche a intégré c'est sa a l'adresse http://www.telecharger-mp3-gratuit.com/autoComplete/

Le code est:

<script type="text/javascript" src="jquery-1.2.1.pack.js"></script>
<script type="text/javascript">
function lookup(inputString) {
if(inputString.length == 0) {
// Hide the suggestion box.
$('#suggestions').hide();
} else {
$.post("rpc.php", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
} // lookup

function fill(thisValue) {
$('#inputString').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
}
</script>

<style type="text/css">
body {
font-family: Helvetica;
font-size: 11px;
color: #000;
}

h3 {
margin: 0px;
padding: 0px;
}

.suggestionsBox {
position: relative;
left: 30px;
margin: 10px 0px 0px 0px;
width: 200px;
background-color: #212427;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 2px solid #000;
color: #fff;
}

.suggestionList {
margin: 0px;
padding: 0px;
}

.suggestionList li {

margin: 0px 0px 3px 0px;
padding: 3px;
cursor: pointer;
}

.suggestionList li:hover {
background-color: #659CD8;
}
</style>

</head>

<form>



</form>

... que je n'arrive pas a intégré...
Merci pour votre réponse rapide !
dedebis84
Messages postés
29
Date d'inscription
vendredi 25 août 2006
Statut
Membre
Dernière intervention
20 juin 2012
-
Ce code est vieillissant. Tu développes en quel langage ?

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.