Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage JavaScript Naviguer sur un site avec un autocomplétion

Naviguer sur un site avec un autocomplétion

3 réponses
Avatar
alfrai
Bonjour !
Je suis nouveau dans ce groupe et j'ai besoin de votre aide pour
r=E9ussir mon projet de navigation avec un autocompletion.

J'ai d=E9couvert un tuto que j'ai repris sur le site j0k3r.n3t.net. qui
tourne avec les fichiers prototype.js, scriptaculous.js
autocompletion.js, autocompletion.php et une base de donn=E9e bdd.sql.
J'ai t=E9l=E9charg=E9 l'ensemble du script (ici :
http://www.j0k3r.net/ajax-une-autocompletion-avancee-en-ajax-6.html )
et tout fonctionne bien en local. Pour mes besoins, je souhaiterais
exploiter le script de cet autocompl=E9tion pour afficher une page web
correspondant =E0 chaque s=E9lection dans le champ texte. Sur l'exemple du
tuto la s=E9lection correspond =E0 des noms de personne. Le code permet
d'afficher depuis une balise span le nom de la personnes + sa photo
(issu d'un dossier "prenom"). L'id=E9e serait d'afficher une nouvelle
page web =E0 la place du span. Une page web qui ferait office de fiche
pour chaque personne accessible depuis l'autocompletion. Cela, je ne
sais pas le faire, parce que le JavaScript c'est encore du chinois
pour moi. Votre aide sera le bienvenue.

Voici le code repris chez j0k3r.n3t.net pour ceux qui souhaiterais
m'aider.



Fichier PHP autocompletion.php :


<?php
if(isset($_POST['chef'])){
header('Content-type: text/html; charset=3Diso-8859-1');
// on inclut la connexion
mysql_connect('localhost', 'xxxx', 'xxxxxxx');
mysql_select_db('bdd');

// on fait la requ=EAte
$sql =3D "SELECT `nom`, `prenom`, `id`
FROM `personne`
WHERE `nom` LIKE '".$_POST['chef']."%'";
$req =3D mysql_query($sql);

$i =3D 0;
echo '<ul class=3D"contacts">';
// on boucle sur tous les =E9l=E9ments
while($autoCompletion =3D mysql_fetch_assoc($req)){
echo '
<li class=3D"contact"><div class=3D"image"><img src=3D"personne/'.
$autoCompletion['id'].'-mini.jpg"/></div><div class=3D"nom">'.
$autoCompletion['nom'].'</div>
<div class=3D"prenom">
<span class=3D"informal">'.$autoCompletion['prenom'].'</span>
</div>
</li>';
// on s'arr=EAte s'il y en a trop
if (++$i >=3D 10)
die('<li>...</li></ul>');
}
echo '</ul>';
die();
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns=3D"http://www.w3.org/1999/xhtml">
<head>
<title>Une autocompletion avanc=E9e en AJAX</title>
<script type=3D"text/javascript" src=3D"lib/prototype.js"></script>
<script type=3D"text/javascript" src=3D"lib/scriptaculous.js"></script>
<script type=3D"text/javascript" src=3D"lib/autocompletion.js"></script>
<style type=3D"text/css">
body{
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: justify;
font-size: 12px;
color: #565656;
}

img {
border: none;
}

ul {
list-style: none;
margin: 0;
padding: 0;
}
/* Autocompletion */
.update{
position:absolute;
width:250px;
background-color:white;
border:1px solid #888;
margin:0px;
padding:0px;
}

ul.contacts {
list-style-type: none;
margin:0px;
padding:0px;
text-align: left;
}
ul.contacts li.selected { background-color: #ffb; cursor: pointer; }
li.contact {
list-style-type: none;
display:block;
margin:0;
padding:2px;
height:32px;
}
li.contact div.image {
float:left;
width:32px;
height:32px;
margin-right:8px;
}
li.contact div.nom {
font-weight:bold;
font-size:12px;
line-height:1.2em;
}
</style>
</head>
<body>

Liste des personnes pr=E9sentes dans la base :<br/>
<?
mysql_connect('localhost', 'root', '');
mysql_select_db('bdd');

// on fait la requ=EAte
$sql =3D "SELECT `nom`, `prenom`, `id`
FROM `personne`
WHERE `nom` LIKE '".$_POST['chef']."%'";
$req =3D mysql_query($sql);
while($autoCompletion =3D mysql_fetch_assoc($req)){
echo '<u>'.$autoCompletion['id'].'.</u> '.
$autoCompletion['nom'].'<br/>';
}
?>
<br/>
<form action=3D"?" method=3D"post" onsubmit=3D"return false;">
<label for=3D"chef">Chef : </label>
<input type=3D"input" name=3D"chef" id=3D"chef" value=3D"" />
<div class=3D"update" id=3D"chef_update"></div>
<input type=3D"hidden" name=3D"chef_id" id=3D"chef_id" value=3D"" />
</form>
<br/>
Num=E9ro de la personne avec son nom : <span id=3D"chef_log"></span>

<script type=3D"text/javascript">
new Ajax.Autocompleter ('chef',
'chef_update',
'autocompletion.php',
{
method: 'post',
paramName: 'chef',
afterUpdateElement: ac_return
});
</script>

</body>
</html>




Fichier JAVASCRIPT autocompletion.js :

function ac_return(field, item){
// on met en place l'expression r=E9guli=E8re
var regex =3D new RegExp('[0123456789]*-mini', 'i');
// on l'applique au contenu
var nomimage =3D regex.exec($(item).innerHTML);
//on r=E9cup=E8re l'id
id =3D nomimage[0].replace('-mini', '');
// et on l'affecte au champ cach=E9
$(field.name+'_id').value =3D id;
// log
$(field.name+'_log').innerHTML =3D '<br/>'+id+' - '+$F(field.name)+'<br/
><img src=3D"personne/'+id+'-mini.jpg" />';
}




Fichier SQL bdd.sql :


--
-- Structure de la table `personne`
--

CREATE TABLE `personne` (
`id` int(11) NOT NULL auto_increment,
`nom` varchar(255) NOT NULL default '',
`prenom` varchar(255) NOT NULL default '',
PRIMARY KEY (`id`)
) AUTO_INCREMENT=3D11 ;

--
-- Contenu de la table `personne`
--

INSERT INTO `personne` VALUES (1, 'Gentzen', 'Scott');
INSERT INTO `personne` VALUES (2, 'Codrington', 'Rick');
INSERT INTO `personne` VALUES (3, 'Munson', 'Kyle');
INSERT INTO `personne` VALUES (4, 'Giordano', 'Mike');
INSERT INTO `personne` VALUES (5, 'Melson', 'Randy');
INSERT INTO `personne` VALUES (6, 'Metelak', 'Nate');
INSERT INTO `personne` VALUES (7, 'Hemeon', 'Mark');
INSERT INTO `personne` VALUES (8, 'Craig', 'Jim');
INSERT INTO `personne` VALUES (9, 'Petridis', 'Aris');
INSERT INTO `personne` VALUES (10, 'Thompson', 'Dave');

Merci de votre aide.

Alfrai.
Signaler un problème avec ce contenu

3 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Avatar
SAM
Bonjour !
Je suis nouveau dans ce groupe et j'ai besoin de votre aide pour
réussir mon projet de navigation avec un autocompletion.

J'ai découvert un tuto que j'ai repris sur le site j0k3r.n3t.netl.
J'ai téléchargé l'ensemble du script (ici :
http://www.j0k3r.net/ajax-une-autocompletion-avancee-en-ajax-6.html



Bon, le truc a l'air de fonctionner tout seul à grand renfortS de JS.

Je vois

<form action="?" onsubmit="return false">

c a d que le formulaire n'est jamais envoyé


If faut permettre l'envoi du formulaire une foi le champ du nom rempli
par le JS+php d'autocomplétion
donc il manque :
- le fichier final en PHP a appeler par l'action
- un bouton submit
- de pouvoir passer à true le onsubmit

Voici une proposition un peu bancale d'y parvenir (espère-je) faute de
savoir se servir des outils particuliers des biblis de JS utilisées :

<form action="ma_belle_fiche.php" onsubmit="return truc" method="post">

<label for="chef">Chef : </label>
<input type="input" name="chef" id="chef" value="" />
<div class="update" id="chef_update"></div>
<input type="hidden" name="chef_id" id="chef_id" value="" />


<input type=submit value="voir fiche"
onclick="truc = chef.value.length>2">

</form>


Ne reste qu'à réaliser le fichier php 'ma_belle_fiche.php'
qui va récupérer la totale de la fiche d'id = chef_id
dans la base

<?php
if(isset($_POST['chef_id'])){
header('Content-type: text/html; charset=iso-8859-1');
// on inclut la connexion
mysql_connect('localhost', 'xxxx', 'xxxxxxx');
mysql_select_db('bdd');

// on fait la requête
$sql = "SELECT `nom`, `prenom`, `id`, `age`, `tel`
FROM `personne`
WHERE `id` LIKE '".$_POST['chef_id']."%'";
$req = mysql_query($sql);
... etc ...



Il serait sans doute intéressant que le bouton de submit ne soit visible
qu'après un choix dans la liste proposée par l'autocomplétion ...
mais ... bon ... déjà faudrait voir si cette rustine fonctionne.

--
sm

Avatar
Mihamina Rakotomandimby
SAM wrote:
Bon, le truc a l'air de fonctionner tout seul à grand renfortS de JS.


En plus, si l'autocompletion requiert un requete,... bonjour le nombre
de requete...

Avatar
SAM
SAM wrote:
Bon, le truc a l'air de fonctionner tout seul à grand renfortS de JS.


En plus, si l'autocompletion requiert un requete,... bonjour le nombre
de requete...


dans l'exemple donné en ligne ça va très vite
bon ... la base n'est pas très fournie ... !

Je suppose qu'on peut imaginer que le php crée en 1er chef une "base" en
JS (base réduite id + nom puisque l'idée est la complétion sur le nom)
et que la complétion se fasse directement en JS (sans AjaX)

Ça ne sera pas + gourmand, ni en php, ni en JS (et même certainement moins).

Pour la complétion en JS on pourra se rapprocher de :
http://groups.google.fr/group/comp.lang.javascript/msg/ecfed36c8f308c3b