Bonjour,
Dans le cadre de mon stage je dois crée un petit formulaire d'autocompletion en asp javascript et ajax.
J'ai réussi a mettre en place sauf une dernière chose. Lorsque je sélectionne la valeur qui m'intéresse dans la DIV cette valeur n'est pas transférer dans l'input qui va permettre la recherche.
voici le test et ce qu'il donne (veuillez taper "e" par exemple il a un tableau de prénom) :
http://www.testoras.com/test_yassin/testajax/
voici le code de ma page gethint.asp :
Code :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
| <%
response.expires=-1
dim a(31)
'Fill up array with names
a(1)="Anna"
a(2)="Brittany"
a(3)="Cinderella"
a(4)="Diana"
a(5)="Eva"
a(6)="Fiona"
a(7)="Gunda"
a(8)="Hege"
a(9)="Inga"
a(10)="Johanna"
a(11)="Kitty"
a(12)="Linda"
a(13)="Nina"
a(14)="Ophelia"
a(15)="Petunia"
a(16)="Amanda"
a(17)="Raquel"
a(18)="Cindy"
a(19)="Doris"
a(20)="Emeline"
a(21)="Evita"
a(22)="Sunniva"
a(23)="Tove"
a(24)="Unni"
a(25)="Violet"
a(26)="Liza"
a(27)="Elizabeth"
a(28)="Ellen"
a(29)="Wenche"
a(30)="Vicky"
a(31)="Eve"
'get the q parameter from URL
q=ucase(request.querystring("q"))
'lookup all hints from array if length of q>0
if len(q)>0 then
hint=""
for i=1 to 31
if q=ucase(mid(a(i),1,len(q))) then
if hint="" then
'hint= "<a href >"&a(i)&"</a> <br/>"
'hint= "<a href onclick='document.getElementById(""txt1"")'>"&a(i)&"</a> <br/>"
'hint= "<a href onclick='alert("""&a(i)&""");'>"&a(i)&"</a> <br/>"
hint=hint & " <a href onclick='test();'>"&a(i)&"</a> <br/>"
else
'hint=hint & " <a href onclick='alert("""&a(i)&""");'>"&a(i)&"</a> <br/>"
'hint=hint & " <a href onclick='document.getElementById(""txt1"").value = "&a(i)&";'>"&a(i)&"</a> <br/>"
hint=hint & " <a href onclick='test();'>"&a(i)&"</a> <br/>"
end if
end if
next
end if
'Output "no suggestion" if no hint were found
'or output the correct values
if hint="" then
response.write("no suggestion")
else
response.write(hint)
end if
%> |
Voici ma page index.asp:
Code :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<link rel="stylesheet" type="text/css" href="document.css">
<script type="text/javascript">
<!-- #include file="gethint.asp"-->
function searchfield_focus(obj)
{
obj.style.color=""
obj.style.fontStyle=""
if (obj.value=="Search w3schools.com")
{
obj.value=""
}
}
var pageTracker = _gat._getTracker("UA-3855518-1");
pageTracker._initData();
pageTracker._trackPageview();
</script>
<!--[if gt IE 7]>
<style>
body
{
overflow-y:scroll;
}
</style>
<![endif]-->
<script type="text/javascript">
function showHint(str)
{
var xmlhttp;
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gethint.asp?q="+str,true);
xmlhttp.send();
}
function test()
{
document.getElementById("txt1").value= "TEST"
}
</script>
<body>
<table class="example" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr><td>
<h2 class="example">Exemple</h2>
<table cellspacing="0" cellpadding="3" border="0" width="100%" style="border:1px solid #d4d4d4;background:white">
<tr><td>
<p><b>Ecrire un prenom:</b></p>
Prenom: <input type="text" id="txt1" name="txt1" onkeyup="showHint(this.value)" />
<div id="txtHint" name="txtHint" ></div>
<!--<a href><div id="txtHint" onclick="focus_on();" style="border: black 1px solid; border-bottom: black 1px solid; border-top-style: solid;"></div></a>
-->
</td></tr></table>
</body>
</html> |
La fonction test est présente suite a de nombreux essai donc pas forcement indispensable !
Si vous avez une idée pour transférer le contenu de la Div dans l'input Text je suis preneur !
Merci D'avance !
01/02/2011, 16h03
Probleme sur Autocompletion
00
