Discussion :

[oxyseb]

Bonjour,

Je rencontre un problème lié à l'autocomplétion d'un champ de saisie. Lors de la saisie d'un nom dans le champ, j'ai une requête ajax qui charge une liste. Tout fonctionne sauf que je voudrais forcer l'utilisateur à choisir un élément de la liste.

Voici le code de mon champ de saisie (seule la partie "auteur" m'intéresse pour le moment) :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<!-- Addition tab -->
<div id="ajout">
	<form action="index.php?controler=Admin&action=InsertBook" method ="post">
		<p>
			<label for="author">Auteur :</label>
			<input id="author" name="author" required placeholder="Nom de l'auteur"/>
			<input type="button" value="+" id='jqxButton1' />
		</p>
		<p>
			<label for="genre">Genre :</label>
			<input id="genre" name="genre" required placeholder="Genre"/>
			<input type="button" value="+" id='jqxButton2' />
		</p>
		<p>
			<label for="title">titre :</label>
			<input id="title" name="title" required placeholder="Titre du livre"/>
		</p>
 
		<p>
			<label for="isbn">N° ISBN :</label>
			<input id="isbn" name="isbn" required placeholder="Référence ISBN"/>
		</p>
		<p>
			<label for="summary">Résumé :</label>
			<textarea id="summary" name="summary" cols="25" rows="5"></textarea>
		</p>
		<p><input type="submit" id="contact" name="contact" value="Envoyer" /></p>
	</form>
 
</div>
<!-- End of Addition tab -->

Voici mon code javascript :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
// Ajax processing for autocompletion author form
var xhr = new XMLHttpRequest();
xhr.open('POST', 'index.php', false);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded, charset=utf-8');
xhr.send('controler=Admin&action=GetAuthors');
if(xhr.readyState === 4 && xhr.status === 200){
	$("#author").jqxInput({
		height: 25,
		width: 200,
		minLength: 1,
		source: JSON.parse(xhr.responseText)
	});
}
// End of ajax processing for autocompletion author form

Voici la partie php :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
public function getAuthors(){
 
	$req = "SELECT CONCAT(first_name, ' ', name ) AS author FROM authors";
	$result = $this -> executeQuery($req, array (), 'select');
 
	$author_all = array();
 
	while ( $author_all[] = $result->fetch(PDO::FETCH_NUM)[0]);
	array_pop($author_all);
 
	echo json_encode($author_all);
 
}

Je ne vois pas comment forcer le choix à un résultat de la liste...

Merci de m'avoir lu.



Edit: Je crois que je me suis un peu mal exprimé dans mon problème...
En fait je charge la liste des auteurs présents en base et lors de la saisie dans le champ les auteurs présent en base avec les lettres entrées apparaissent en dessous. J'aimerai forcer l'utilisateur à faire un choix dans cette liste, et ainsi ne pas laisser la possibilité à l'utilisateur à entrer n'importe quoi

et merci pour la correction de mon message, je ne savais pas que l'on devait mettre le nom du code dans la balide

[oxyseb]

Pour information, j'ai changé ma méthode.
Au lieu de chercher l'autocomplétion j'ai utilisé la bibliothèque jqWidgets avec le jqxDropDownList. Dans ce widget la liste déroulante des entrées présentes en base apparait, permettant ainsi le choix.... Un champ "looking for" permet de rechercher un nom dans la liste...

Si ça peut aider