Autocomplétion et récupération d'ID

**deparisk** · 01/09/2015, 21h50

Bonsoir,

Alors voila j'aimerais utiliser de l'autocompletion pour un input dans un formulaire afin rechercher un 'aliment' dans une bdd et renvoyer l'id via value de l'input.
Pour l'instant j'arrive a faire l'autocompletion grace a un tuto sur le net, malheuresement je n'ai pas tout compris et n'arrive pas a l'adapter pour recuperer l'iD

Pouvez vous m'aider?

Voici mon index.html:

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
<!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" />
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
 
<body>
 
            <form>
                <div class="label_div">Aliment : </div>
                <div class="input_container"   width="70%">
					<! appel de la fction autocomplete quand je tape quelque chose > 
                    <input type="text" id="aliment" onkeyup="autocomplet()" >
                    <ul id="aliment_list_id"></ul>
                </div>
            </form>
 
 
 
</body>
</html>

mon ajax_refresh.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
15
16
17
18
19
20
21
<?php
 
 
function connect() {
    return new PDO('mysql:host=..;dbname=..', '..', '..', array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION, PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8"));
}
 
$pdo = connect();
$keyword = '%'.$_POST['keyword'].'%';
$sql = "SELECT * FROM ingredient WHERE aliment LIKE (:keyword) LIMIT 0, 10";
$query = $pdo->prepare($sql);
$query->bindParam(':keyword', $keyword, PDO::PARAM_STR);
$query->execute();
$list = $query->fetchAll();
foreach ($list as $rs) {
 
	$aliment = str_replace($_POST['keyword'], '<b>'.$_POST['keyword'].'</b>', $rs['aliment'].' fait '.$rs['calories'].' );
	 
         echo '<li onclick="set_item(\''.str_replace("'", "ol\'", $rs['aliment']).'\')">'.$aliment.'</li>';
}
?>

mon script.js :

Code :

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
// autocomplet : this function will be executed every time we change the text
function autocomplet() {
	var min_length = 0; // min caracters to display the autocomplete
	var keyword = $('#aliment').val();
	if (keyword.length >= min_length) {
		$.ajax({
			url: 'ajax_refresh.php',
			type: 'POST',
			data: {keyword:keyword},
			success:function(data){
				$('#aliment_list_id').show();
				$('#aliment_list_id').html(data);
			}
		});
	} else {
		$('#aliment_list_id').hide();
	}
}
 
// set_item : this function will be executed when we select an item
function set_item(item) {
	// change input value
	$('#aliment').val(item);
	// hide proposition list
	$('#aliment_list_id').hide();
}

merci de votre aide

**Sebastien14** · 02/09/2015, 08h06

Bonjour,

Je ne comprends pas bien de quel id tu parles ?
L’auto complétion fonctionne ?

**deparisk** · 02/09/2015, 12h53

Dans ma bdd, sur la table en question j'ai un colonne 'aliment' et une 'id'.
Moi je veux dans mon formulaire recuperer l'ID de l'aliment en question.

Sinon oui l'autocompletion marche mais j'aimerai qu'a la selection de l'aliment , l'input est pour valeur l'id de l'aliment.

**Sebastien14** · 02/09/2015, 13h34

Il faut que tu modifie ta boucle php :

Code php :

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

1
2
3
4
5
6
7
8
<?php
foreach ($list as $rs) {
 
	$aliment = str_replace($_POST['keyword'], '<b>'.$_POST['keyword'].'</b>', $rs['aliment'].' fait '.$rs['calories'].' );
 // j'ai modifié le rs['aliment'] en rs['id'] 
         echo '<li onclick="set_item(\''.str_replace("'", "ol\'", $rs['id']).'\')">'.$aliment.'</li>';
}
?>

**deparisk** · 02/09/2015, 13h42

Merci pour ton aide.

Autocomplétion et récupération d'ID

jQuery

Vue hybride

Discussions similaires

Partager

Partager