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

Soyez le premier à donner votre avis sur cette source.

Snippet vu 16 549 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
-
Personne ne me dis si ce code est intéréssant???
alte94
Messages postés
3
Date d'inscription
jeudi 7 août 2008
Statut
Membre
Dernière intervention
13 août 2008
-
Ca a l'air bien intéressant et bien pratique mais je cherche l'équivalent en php. Tu dis qu'il existe mais le seul que j'ai trouvé qui se rapproche de ce que tu as fait est là :
http://www.javascriptfr.com/code.aspx?ID=41154

L'ennui est qu'il ne fonctionne pas avec des requetes mais seulement avec des tableaux statiques. D'où tout l'intérêt de ton script, alors si tu peux me dire où trouver la version php, ça m'éviterait de galérer autant que toi pour l'adapter.

Merci
dedebis84
Messages postés
29
Date d'inscription
vendredi 25 août 2006
Statut
Membre
Dernière intervention
20 juin 2012
-
vas sur ce site, il explique comment faire :
http://nodstrum.com/2007/09/19/autocompleter/

++
alte94
Messages postés
3
Date d'inscription
jeudi 7 août 2008
Statut
Membre
Dernière intervention
13 août 2008
-
Merci Dedebis84.

C'est étonnant que ton script ne suscite pas davantage de retours parce qu'il m'a l'air (je ne connais pas l'ASP) bien foutu.
dedebis84
Messages postés
29
Date d'inscription
vendredi 25 août 2006
Statut
Membre
Dernière intervention
20 juin 2012
-
merci, c'est gentil. Mais tu sais bien qu'en informatique rien n'est parfait, il y a toujours des corrections à effectuer, et pus dans quelques mois il sera obsolete, car il aura une nouvelle version autocomplete.
Dur, dur le métier de l'informatique;) lol

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.