Naviguer sur un site avec un autocomplétion

Le
alfrai
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.net. qui
tourne avec les fichiers prototype.js, scriptaculous.js
autocompletion.js, autocompletion.php et une base de donnée bdd.sql.
J'ai téléchargé 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étion pour afficher une page web
correspondant à chaque sélection dans le champ texte. Sur l'exemple du
tuto la sélection correspond à 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ée serait d'afficher une nouvelle
page web à 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=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`
FROM `personne`
WHERE `nom` LIKE '".$_POST['chef']."%'";
$req = mysql_query($sql);

$i = 0;
echo '<ul class="contacts">';
// on boucle sur tous les éléments
while($autoCompletion = mysql_fetch_assoc($req)){
echo '
<li class="contact"><div class="image"><img src="personne/'.
$autoCompletion['id'].'-mini.jpg"/></div><div class="nom">'.
$autoCompletion['nom'].'</div>
<div class="prenom">
<span class="informal">'.$autoCompletion['prenom'].'</span>
</div>
</li>';
// on s'arrête s'il y en a trop
if (++$i >= 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="http://www.w3.org/1999/xhtml">
<head>
<title>Une autocompletion avancée en AJAX</title>
<script type="text/javascript" src="lib/prototype.js"></script>
<script type="text/javascript" src="lib/scriptaculous.js"></script>
<script type="text/javascript" src="lib/autocompletion.js"></script>
<style type="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ésentes dans la base :<br/>
<?
mysql_connect('localhost', 'root', '');
mysql_select_db('bdd');

// on fait la requête
$sql = "SELECT `nom`, `prenom`, `id`
FROM `personne`
WHERE `nom` LIKE '".$_POST['chef']."%'";
$req = mysql_query($sql);
while($autoCompletion = mysql_fetch_assoc($req)){
echo '<u>'.$autoCompletion['id'].'.</u> '.
$autoCompletion['nom'].'<br/>';
}
?>
<br/>
<form action="?" method="post" onsubmit="return false;">
<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="" />
</form>
<br/>
Numéro de la personne avec son nom : <span id="chef_log"></span>

<script type="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égulière
var regex = new RegExp('[0123456789]*-mini', 'i');
// on l'applique au contenu
var nomimage = regex.exec($(item).innerHTML);
//on récupère l'id
id = nomimage[0].replace('-mini', '');
// et on l'affecte au champ caché
$(field.name+'_id').value = id;
// log
$(field.name+'_log').innerHTML = '<br/>'+id+' - '+$F(field.name)+'<br/
><img src="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=11 ;

--
-- 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.
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
SAM
Le #768668
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 :


<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

Mihamina Rakotomandimby
Le #768667
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...

SAM
Le #768666
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


Publicité
Poster une réponse
Anonyme