Faire des index

Version imprimable

Faire des index

j'ai un champs autocompletion qui se trouve dans une boucle et j'aimerai savoir comment dire a jquery le champs qu'on est entrain de saisir voici mon code

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
79
80
81
82
83
84
85
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
</head>
  <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
 <script type="text/javascript">
	function lookup(inputString) {
		if(inputString.length == 0) {
			// cache la balise suggestion.
			$('#suggestions').hide();
		} else {
			$.post("ajaxAutocomplet.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">
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>
 
<body>
<?php 
for($n=0;$n<=10;$n++){
?>
<div>
				Tapez le motif:
 
				<input type="text" size="30" value="" id="inputString" name ="motif[]" onkeyup="lookup(this.value);" onblur="fill();" />
			</div>
 
			<div class="suggestionsBox" id="suggestions" style="display: none;">
				<img src="images/upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
				<div class="suggestionList" id="autoSuggestionsList">
					&nbsp;
				</div>
			</div>
<?php
}
?>
</body>
</html>

Merci d'avance

17/08/2012, 22h53
danielhagnoul

Je vois une boucle PHP entourant un bloc HTML qui comporte des ID alors qu'un ID doit être unique !

supposons que je met des index sur les div

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<?php 
for($n=0;$n<=10;$n++){
?>
<div>
				Tapez le motif:
 
				<input type="text" size="30" value="" id="inputString[<?php echo $i ?>]" name ="motif[<?php echo $i ?>]" onkeyup="lookup(this.value);" onblur="fill();" />
			</div>
 
			<div class="suggestionsBox" id="suggestions[<?php echo $i ?>]" style="display: none;">
				<img src="images/upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
				<div class="suggestionList" id="autoSuggestionsList[<?php echo $i ?>]">
					&nbsp;
				</div>
			</div>
<?php
}
?>
</body>

comment mettre les index sur le code jquery?

Non ! Le plus simple est d'utiliser les classes et jQuery correctement !

Je n'ai rien pu tester, il n'est donc pas exclu qu'il y ait une erreur quelque part dans mon exemple.

Code:

1
2
3
4
5
6
7
8
9
<div>
   <input type="text" size="30" value="" class="inputString" name ="motif[]" />
</div>
<div class="suggestionsBox" style="display: none;">
   <img src="images/upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
   <div class="suggestionList">
      &nbsp;
   </div>
</div>

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
$( ".inputString").keyup( function( inputString ){ 
   var jObjSugBox = $( this ).parent().next(),
       jObjSugList = jObjSugBox.children( ".suggestionList" );
 
		if ( inputString.length == 0 ){
			// cache la balise suggestion.
			jObjSugBox.hide();
		} else {
			$.post("ajaxAutocomplet.php", {queryString: ""+inputString+""}, function(data){
				if ( data.length > 0 ){
					jObjSugBox.show();
					jObjSugList.html(data);
				}
			});
		}
});
 
$( ".inputString").blur( function( thisValue ){
   $( this ).val( thisValue );
 
   setTimeout( function(){
	$( this ).parent().next().hide();
   }, 200);
});