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

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