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 !!
N'oublie pas le pouce vert
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
N'oublie pas le pouce vert
oh merci beaucoup mais j'aurais plusieur question deja qu'est ce que tu inclue dans ton dernier fichier au tout debut
N'oublie pas le pouce vert
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(); } }
N'oublie pas le pouce vert
Et si je souhaite rajouter des actions pour faire apparaitre autrement ma liste ou la faire disparaitre stp
N'oublie pas le pouce vert
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); }
N'oublie pas le pouce vert
Merci beaucoup mais une dernière question a quoi sers cette fonction "setTimeout" dans ce cas la
N'oublie pas le pouce vert
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
N'oublie pas le pouce vert
Vraiment merci je vais bosser la dessus
N'oublie pas le pouce vert
Pas de soucis bon courage
N'oublie pas le pouce vert
Vous avez un bloqueur de publicités installé.
Le Club Developpez.com n'affiche que des publicités IT, discrètes et non intrusives.
Afin que nous puissions continuer à vous fournir gratuitement du contenu de qualité, merci de nous soutenir en désactivant votre bloqueur de publicités sur Developpez.com.
Partager