Bonjour j'aimerais faire une forme d'autocomplete mais je suis assez perdu avec tout ces tuto c'est assez complexe et je ne comprend pas aidez moi !!![]()
Bonjour j'aimerais faire une forme d'autocomplete mais je suis assez perdu avec tout ces tuto c'est assez complexe et je ne comprend pas aidez moi !!![]()
Bonjour
je ne devrais pas mais je vais te montrer comment faire on est le 8 mai après tout c'est fête ^^.
Pour faire une autocomplete il te faut de l'ajax/js, du php, du css/html.
Dans un premier temps je vais faire l'input et la liste :
index.php :
Code php : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5 echo '<div class="autocomplete">'; echo '<input type="text" id="word_id" onkeyup="autocomplete(\'#word_id\',\'#word_list_id\')">'; echo '<ul id="word_list_id"></ul>'; echo '</div>';
ensuite un peut de css pour une mise en forme :
style.css :
Code css : 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 .autocomplete { height: 30px; float: left; } .autocomplete input { height: 20px; width: 200px; padding: 3px; border: 1px solid #cccccc; border-radius: 0; } .autocomplete ul { width: 206px; border: 1px solid #eaeaea; position: absolute; z-index: 9; background: #f3f3f3; list-style: none; } .autocomplete ul li { padding: 2px; } .autocomplete ul li:hover { background: #eaeaea; }
après pour la magie et pour tout ce qui va déclencher les actions
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
16
17
18
19
20
21
22
23
24
25
26
27
28
29 function autocomplete(objid,objlist) { var min_length = 0; var keyword = $(objid).val(); if (keyword.length >= min_length) { $.ajax({ url: 'autocomplete.php', type: 'POST', data: {keyword:keyword,objid:objid,objlist:objlist}, success:function(data) { $(objlist).show(); $(objlist).html(data); } }); } else { $(objlist).hide(); } } function set_item(item,objid,objlist) { $(objid).val(item); $(objlist).hide(); }
et ce qui va créer et renvoyer la liste du 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 require_once './connectionsql.php'; $pdo = conn_pdo(); $txt = ''; $keyword = '%'.$_POST['keyword'].'%'; $sql = "SELECT * FROM table WHERE champ1 LIKE '{$keyword}' LIMIT 0, 10"; foreach ($pdo->query($sql) as $rs) { lib = str_replace($_POST['keyword'], '<b>'.$_POST['keyword'].'</b>', $rs['champ1']); $txt .= '<li onclick="set_item(\''.str_replace("'", "\'", $rs['champ1']).'\',\''.$_POST['objid'].'\',\''.$_POST['objlist'].'\')">'.$plat_lib.'</li>'; } $txt = utf8_encode($txt); echo $txt;
et voila c'est assez complexe mais en même temps simple
oh merci beaucoup mais j'aurais plusieur question deja qu'est ce que tu inclue dans ton dernier fichier au tout debut
C'est ma connexion a ma bdd avec pdo je te donne un exemple :
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 function conn_pdo() { try { $pdo = new PDO('mysql:host=*****;dbname=******','**login**','**pass**'); $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); $pdo->setAttribute(PDO::MYSQL_ATTR_USE_BUFFERED_QUERY, true); return $pdo; } catch(Exception $e) { echo 'Erreur : '.$e->getMessage().'<br />'; echo 'N° : '.$e->getCode(); exit(); } }
Et si je souhaite rajouter des actions pour faire apparaitre autrement ma liste ou la faire disparaitre stp
Rien de plus simple l'amis tu rajoute les evenements suivant :
- ondblclick : pour le double clique
- onblur : quand l'objet perd le focus
exemple :
index.php
Code php : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5 echo '<div class="autocomplete">'; echo '<input type="text" class="form-control" id="word_id" onkeyup="autocomplete(\'#word_id\',\'#word_list_id\')" ondblclick="autocomplete(\'#word_id\',\'#word_list_id\')" onblur="out_focus(\'#word_list_id\')">'; echo '<ul id="word_list_id"></ul>'; echo '</div>';
et tu rajoute cette fonction dans ton script.js :
voila voila
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8 function out_focus_plat(objlist) { setTimeout(function() { $(objlist).hide(); }, 250); }
Merci beaucoup mais une dernière question a quoi sers cette fonction "setTimeout" dans ce cas la![]()
C'est un moyen que j'ai trouvé pour que si tu clique sur la liste que la liste ne disparaît pas avant donc je met un petit timer pour éviter cela
Vraiment merci je vais bosser la dessus![]()
Pas de soucis bon courage
Partager