11540 sujets

JavaScript, DOM et API Web HTML5

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

<!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
avec "this" ainsi : lookup(this)
lookup(input) {
  var inputString = input.value;
  $(input).......
}


Aussi, eval c'est mal
setTimeout(String, ...) -> fait un eval
donc setTimeout(String, ...) c'est mal
doc de setTimeout

Puis vu que tu utilises jQuery pourquoi pas $(...).bind({keyup: lookup, blur: fill}) plutôt que les attribut en dur ?

En plus ton id suggestions et dans une boucle ce qui n'en fait plus un élément unique : un id doit être unique dans la page.