sourcilpower

Envoyé par sourcilpower

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
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();
  }
}
 
$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