Débutant Problème autocomplete

Version imprimable

08/05/2015, 15h38
sourcilpower

Débutant Problème autocomplete

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 !!:aie:

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:

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:

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:

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:

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

08/05/2015, 15h43
sourcilpower

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:

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();
  }
}

08/05/2015, 15h50
sourcilpower

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:

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 :
Code:

1 2 3 4 5 6 7 8 function out_focus_plat(objlist) { setTimeout(function() { $(objlist).hide(); }, 250); }
voila voila

08/05/2015, 16h05
sourcilpower

Merci beaucoup mais une dernière question a quoi sers cette fonction "setTimeout" dans ce cas la ;)
08/05/2015, 16h08
sourcilpower

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
08/05/2015, 16h09
sourcilpower

Vraiment merci je vais bosser la dessus ;)
08/05/2015, 16h11
sourcilpower

Pas de soucis bon courage