Fonctions sur deux champs distincts

Version imprimable

Bonjour, j'utilise le même script et j'arrive pas à faire pour deux id different...

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
function lookup(inputString) {
	if(inputString.length == 0) { // si le champs txte est vide
		$('#suggestions').hide(); // on cache les suggestions
	} else { // sinon
		$.post("ajax.php", {queryString: ""+inputString+""}, function(data){ // on envoit la valeur du champ texte dans la variable post queryString au fichier ajax.php
			if(data.length >0) {
				$('#suggestions').show(); // si il y a un retour, on affiche la liste
				$('#autoSuggestionsList').html(data); // et on remplit la liste des données
			}
		});
	}
}
function lookup2(inputString) {
	if(inputString.length == 0) { // si le champs txte est vide
		$('#suggestions2').hide(); // on cache les suggestions
	} else { // sinon
		$.post("ajax.php", {queryString: ""+inputString+""}, function(data){ // on envoit la valeur du champ texte dans la variable post queryString au fichier ajax.php
			if(data.length >0) {
				$('#suggestions2').show(); // si il y a un retour, on affiche la liste
				$('#autoSuggestionsList2').html(data); // et on remplit la liste des données
			}
		});
	}
}
function fill(thisValue) { // remplir le champ texte si une suggestion est cliquée
	$('#inputString').val(thisValue);
	setTimeout("$('#suggestions').hide();", 200);
}
function fill2(thisValue) { // remplir le champ texte si une suggestion est cliquée
	$('#inputString2').val(thisValue);
	setTimeout("$('#suggestions2').hide();", 200);
}
$(document).ready( function () { // lorsque la page est entierement chargée
	$("input#inputString").keyup( function() { // si on presse une touche du clavier en étant dans le champ texte qui a pour id inputString
		lookup($(this).val()) 
	});
	$("input#inputString2").keyup( function() { // si on presse une touche du clavier en étant dans le champ texte qui a pour id inputString
		lookup2($(this).val()) 
	});
	$("input#inputString").blur( function() { // si le champs texte perd le focus
		fill() 
	});
	$("input#inputString2").blur( function() { // si le champs texte perd le focus
		fill2() 
	});
});

Merci

22/02/2014, 11h36
Darkaurora

Désoler mais j'arrive pas à comprendre ce que tu arrives pas à faire :)

Jquery code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function lookup(inputString) {
if(inputString.length == 0) {
    // Hide the suggestion box.
    $('#suggestions').hide();
} else {
    $.post("rpc.php", {queryString: ""+inputString+""}, function(data){
        if(data.length >0) {
            $('#suggestions').show();
            $('#autoSuggestionsList').html(data);
        }
    });
}
} // lookup
 
function fill(thisValue) {
$('#inputString').val(thisValue);
$('#suggestions').hide();
}

html :

Code:

1
2
3
<input size="30" id="inputString" onkeyup="lookup(this.value);" type="text" />
<div class="suggestionsBox" id="suggestions" style="display: none;">
<div class="suggestionList" id="autoSuggestionsList"></div>

php :

Code:

1
2
3
4
5
6
7
8
9
10
if(isset($_POST['queryString'])) {
$queryString = $_POST['queryString'];       
if(strlen($queryString) >0) {
$query = "SELECT * FROM cities WHERE city_accented LIKE '$queryString%' LIMIT 10";
$result = mysql_query($query) or die("There is an error in database");
while($row = mysql_fetch_array($result)){
echo '<li onClick="fill(\''.$row['city_accented'].'\');">'.$row['city_accented'].','.$row['country'].' </li>';                                        
}
}
}

Cela permet d'afficher une liste deroulante d'infos contenue dans une bd, en quelque sort c'est un script d’auto-complétion.

J'aimerais utlisé ce code pour deux champs input d'id lieuDepart et d'id lieuArrive
mais je n'y arrive pas avec le code Jquery

25/02/2014, 08h22
SpaceFrog

Fais une fonction qui prend l'input en paramètre ...

Si tu peux obtenir inputString, tu pourrais mettre la même classe à suggestionsBox et suggestionsList, pour faire un each du genre :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
$('.suggestion').each(function(index,value) {
// lire inputString
inputString = ...
if(inputString.length == 0) {
    // Hide the suggestion box.
    $('this').hide();
} else {
    $.post("rpc.php", {queryString: ""+inputString+""}, function(data){
        if(data.length >0) {
            $('this').show();
            // à modifier $('#autoSuggestionsList').html(data);
        }
    });
}
});