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

Soyez le premier à donner votre avis sur cette source.

Snippet vu 17 646 fois - Téléchargée 20 fois

Commenter

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
30 juil. 2008 à 11:44
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
12 août 2008 à 17:48
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
12 août 2008 à 20:25
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
13 août 2008 à 16:08
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.
lastday69 Messages postés 13 Date d'inscription mercredi 16 septembre 2009 Statut Membre Dernière intervention 11 février 2011
28 janv. 2011 à 14:18
Code très intéressant lais ne fonctionne qu'avec du numérique !
S'inscrire maintenant

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.