OVH Cloud OVH Cloud

comment fait Google ?

20 réponses
Avatar
bpdu92
bonjour tous
le portail Google anticipe la saisie, en préaffichant plusieurs choix
comment fait-il ?
aller-retour sur le site aprés chaque caractère saisi ?
utilisation de méthode Ajax (j'ai du mal à lire le src) ?
merci d'avance de vos lumières

10 réponses

1 2
Avatar
SAM
Le 10/6/08 4:21 AM, bpdu92 a écrit :
On Fri, 03 Oct 2008 12:52:34 +0200, SAM
wrote:


Il faudrait savoir ce que tu veux faire exactement.


pas faire, mais plus modestement comprendre
1-le source de la page Google
2-comment est réalisé l'asynchronisme,
càd la simultanéité saisie-anticipation



Alors pour résumer, et seulement pour ce problème :

1) la page dans son HEAD fait appel à un JavaScript externe

<script id="gac_a" tyle="text/javascript"
src="blabla.php?cherche=0"></script>

ce JS externe ne contient que la liste des suggestions,
du genre :

var liste = [
['google.fr','Google'],
['yahoo.com','Yahoo!']
];

liste est un array d'arrays normal
(finalement, pas besoin de Json ici)

2) à la frappe dans le champ de recherche
(sans doute après le 2ième caratère)
on relance un appel à ce javascript externe
par une méthode sans doute voisine de :

function newListe() {
var cible = document.getElementById('gac_a');
var s = document.createElement('script');
s.type = 'text/javascript';
s.src = 'http://recherche.php?cherche=' +
document.forms[0].recherche.value;
cible.parentNode.replaceChild(s, cible);
s.id = 'gac_a';
autocomplete();
}

3) on a en outre un mécanisme de remplissage d'un selecteur
avec les propositions recueillies :

var liste = [];
function autocomplete() {
var o = document.getElementById('suggestions').options;
o.length = 0;
for(var i=0, n = liste.length; i<n; i++) {
o[i] = new Option(liste[i][1], liste[i][0]);
}
}

4) ce qui pourrait nous donner qque chose du genre :

<html>
<script type="text/javascript" src="lister.js"></script>
<script id="gac_a" type="text/javascript"
src="blabla.php?cherche=0"></script>
<form action="cherche.php">
<p>rechercher :
<input type="text" name="recherche"
onkeyup="if(this.value.length>1) newListe();">
<select id="suggestions"

onchange="location='http://'+this.options[this.selectedIndex].value">
<option></option>
</select>
<input type="submit">
</form>
</html>

Le fichier 'lister.js' contient les scripts ci-haut :

function newListe() {
var cible = document.getElementById('gac_a');
var s = document.createElement('script');
s.type = 'text/javascript';
s.src = 'http://recherche.php?cherche=' +
document.forms[0].recherche.value;
cible.parentNode.replaceChild(s, cible);
s.id = 'gac_a';
autocomplete();
}

var liste = [
['google.fr','Google'],
['yahoo.com','Yahoo!']
];
function autocomplete() {
var o = document.getElementById('suggestions').options;
o.length = 0;
for(var i=0, n = liste.length; i<n; i++) {
o[i] = new Option(liste[i][1], liste[i][0]);
}
}

Je pense qu'on peut déjà essayer cette mini-démo telle quelle.
Elle ne rechargera rien puisque 'blabla.php' n'existe pas mais affichera
les choix 'Google' et 'Yahoo'.
Pourtant dans le 'source' de cette page on ne verra pas la liste !


--
sm
Avatar
SAM
Le 10/6/08 9:36 AM, SAM a écrit :

Je pense qu'on peut déjà essayer cette mini-démo telle quelle.
Elle ne rechargera rien puisque 'blabla.php' n'existe pas mais affichera
les choix 'Google' et 'Yahoo'.
Pourtant dans le 'source' de cette page on ne verra pas la liste !



en complément (et en 2ième temps) on pourra créer un fichier :

'blabla.php'

avec :

liste = [
['fr.wikipedia.org/wiki/JavaScript','JavaScript wikipedia'],
['www.editeurjavascript.com/', 'Editeur JavaScript'],
['www.toutjavascript.com/', 'Tout JavaScript'],
['developer.mozilla.org/fr/JavaScript', 'JavaScript MDC'],
['www.commentcamarche.net/javascript/jsintro.php3',
'JavaScript comment ça marche'],
['www.jejavascript.net/ ', 'Programmation en JavaScript'],
['www.easy-script.com/scripts-javascript/ ',
'Scripts JavaScript classés']
];


Pour obtenir une simulation de nouvelle liste.

Ne restera qu'à réaliser un vrai php intelligent qui saura bâtir la
liste voulue.

--
sm
Avatar
bpdu92
On Fri, 03 Oct 2008 12:06:25 +0200, Pascal PONCET
wrote:

ni la saisie, ni les termes suggérés ne sont listés si on affiche le
source



Ça dépend avec quoi tu regardes le source !
Si tu utilises Firefox avec l'extension WebDevelopper
(http://chrispederick.com/work/web-developer), tu as une fonction
"afficher le code source généré" qui te permet de voir les changements
dynamiques.


faut cliquer où pour voir ?

Pour les voir en temps réel, selon les évènements
déclenchés, tu as l'extension FireBug (http://getfirebug.com).
Bref, les bons outils de Webmaster, quoi...



j'ai installé les 2 xpi, firebug et webdevelopper,
où est l'affichage temps réel ?

merci d'avance, docteur
Avatar
Pascal PONCET
bpdu92 a écrit :
faut cliquer où pour voir ?


Tu as un menu "Voir source" avec une option "Voir le code source généré"
qui l'ouvre dans un nouvel onglet (ou une nouvelle fenêtre selon la config).
j'ai installé les 2 xpi, firebug et webdevelopper,
où est l'affichage temps réel ?


Le temps réel n'est disponible que dans Firebug.
Il faut d'abord activer ce plugin pour la page Web en cours, en cliquant
sur son icône en bas à droite (l'espèce de cafard à 45°).
Ensuite, ton écran se coupe en deux partie, en haut ta page Web, en bas
la fenêtre Firebug avec sa propre barre de menu.
Dans ce menu, tu cliques sur "HTML" pour voir le code source généré en
temps réel, sous forme d'arbre DOM que tu peux déplier là où tu veux
pour voir un détail.

Dans le cas de la page Google, tu pourras regarder à deux endroits, mais
pas en même temps :

1- tout en haut, dans le "head", tu as une balise <script id="gac_a"
src="..."> qui vient s'ajouter dès la première frappe dans le champ de
recherche. A la place de "..." tu y vois l'url suivie de la saisie. Si
tu déplies son arbre, tu y verras le contenu du script, qui correspond
au traitement du serveur sur la saisie.

2- tout en bas du "body", tu as un tableau <table class="gac_m" ...>.
En le dépliant, tu y verras les cellules dans lesquelles ont été
recopiées les valeurs du script précédent.

WebDeveloper et Firebug, avec un peu de pratique, tu ne pourras bientôt
plus t'en passer ! ;-)

Bonne chance,
Pascal
Avatar
bpdu92
On Mon, 06 Oct 2008 17:49:15 +0200, Pascal PONCET
wrote:

Il faut d'abord activer ce plugin pour la page Web en cours, en cliquant
sur son icône en bas à droite (l'espèce de cafard à 45°).


ok, vu

Ensuite, ton écran se coupe en deux partie, en haut ta page Web, en bas
la fenêtre Firebug avec sa propre barre de menu.


plutot à gauche et à droite ?


1- tout en haut, dans le "head", tu as une balise <script id="gac_a"
src="..."> qui vient s'ajouter dès la première frappe dans le champ de
recherche.


je la vois pas ?

A la place de "..." tu y vois l'url suivie de la saisie. Si
tu déplies son arbre, tu y verras le contenu du script, qui correspond
au traitement du serveur sur la saisie.


rien ne change qd je saisis ?

2- tout en bas du "body", tu as un tableau <table class="gac_m" ...>.


ok, vu

En le dépliant, tu y verras les cellules dans lesquelles ont été
recopiées les valeurs du script précédent.


je vois que
<script>
1google.xjs_ready=1
</script>
<table class="gac_m" cellspacing="0" cellpadding="0"
style="visibility: hidden; left: 254px; top: 196px; width: 356px;"/>
</body>
manque qqchse ?

WebDeveloper et Firebug, avec un peu de pratique, tu ne pourras bientôt
plus t'en passer ! ;-)


je vois 1 tuto sur Javascript tutoriaux, 1 autre sur le site du zéro,
ils ont ta benediction ?

Bonne chance,
Pascal


tu m'as bien eveillé
big thnx
Avatar
bpdu92
On Fri, 3 Oct 2008 12:19:36 +0200, "Fos Pat" <SPAMcoollATfreePOINTfr>
wrote:

tu décris quoi exactement : le process google ou tu fais tes spec pour faire
la meme chose ?
Parce que dans un cas c'est faux, dans l'autre pourquoi pas.




meme question que précédemment.
Quel est ton objectif ? c'est un projet de fac ? tu apprends à décrire un
process ?
Tu fais des spec ?
Si ce sont des spec, merci de donner le résultat une fois codé histoire
qu'on rigole un peu :)

J'ai vraiment envie de voir le résultat :)

J'ai de plus en plus envie de voir le résultat :)

J'espère que cette phrase n'a aucun lien avec une quelconque notion de
sécurité...

Vaudrait mieux repartir de zéro plutot que de modifier ton texte à mon avis.



merci pour la richesse technique
et la bienveillante courtoisie de ton post
cordialt
Avatar
bpdu92
On Mon, 06 Oct 2008 09:36:19 +0200, SAM
wrote:





<html>
<script type="text/javascript" src="lister.js"></script>
<script id="gac_a" type="text/javascript"
src="blabla.php?cherche=0"></script>
<form action="cherche.php">
<p>rechercher :
<input type="text" name="recherche"
onkeyup="if(this.value.length>1) newListe();">
<select id="suggestions"

onchange="location='http://'+this.options[this.selectedIndex].value">
<option></option>
</select>
<input type="submit">
</form>
</html>


que j'appelle sam.htm

Le fichier 'lister.js' contient les scripts ci-haut :

function newListe() {
var cible = document.getElementById('gac_a');
var s = document.createElement('script');
s.type = 'text/javascript';
s.src = 'http://recherche.php?cherche=' +
document.forms[0].recherche.value;
cible.parentNode.replaceChild(s, cible);
s.id = 'gac_a';
autocomplete();
}

var liste = [
['google.fr','Google'],
['yahoo.com','Yahoo!']
];
function autocomplete() {
var o = document.getElementById('suggestions').options;
o.length = 0;
for(var i=0, n = liste.length; i<n; i++) {
o[i] = new Option(liste[i][1], liste[i][0]);
}
}

Je pense qu'on peut déjà essayer cette mini-démo telle quelle.
Elle ne rechargera rien puisque 'blabla.php' n'existe pas mais affichera
les choix 'Google' et 'Yahoo'.


j'ai donc mis sam.htm et lister.js dans un meme dossier, et
en effet l'anticipation marche (elle s'enrichit à chaque saisie)
mais le un clic sur Soumettre la requete donne Impossible d'afficher
la page, à cause de cherche.php

au plaisir de te lire
Avatar
SAM
Le 10/6/08 10:36 PM, bpdu92 a écrit :
On Mon, 06 Oct 2008 09:36:19 +0200, SAM
wrote:



Je pense qu'on peut déjà essayer cette mini-démo telle quelle.
Elle ne rechargera rien puisque 'blabla.php' n'existe pas mais affichera
les choix 'Google' et 'Yahoo'.





j'ai donc mis sam.htm et lister.js dans un meme dossier, et
en effet l'anticipation marche (elle s'enrichit à chaque saisie)



Heu ... ce n'est pas normal ... c'est Fx qui te propose ça lui-même :-(
(essayer en tapant des trucs inhabituels comme zzz par ex)

mais le un clic sur Soumettre la requete donne Impossible d'afficher
la page, à cause de cherche.php



ben oui ... c'est une mini-démo ! ! !
pas un site complet ! :-(

le but étant d'arriver à voir le mécanisme,
à la frappe dans le champ de recherche : appel d'un JS externe modifié à
chaque appel
qui modifie à son tour un menu-liste-déroulante.

Ici, dans la démo, seul ce menu déroulant fonctionne.

--
sm
Avatar
bpdu92
On Mon, 06 Oct 2008 23:52:13 +0200, SAM
wrote:


j'ai donc mis sam.htm et lister.js dans un meme dossier, et
en effet l'anticipation marche (elle s'enrichit à chaque saisie)



Heu ... ce n'est pas normal ... c'est Fx qui te propose ça lui-même :-(
(essayer en tapant des trucs inhabituels comme zzz par ex)


1-tout ce que je tape est mémorisé par IE et FF,
par ex java, sam, zzzz,...et proposé ensuite, sous la fenetre
2- FF propose Google/Yahoo, dans le déroulant à droite, aprés le 2eme
car saisi
IE 6 n'affiche rien, l'ascenseur reste vide
Avatar
SAM
Le 10/7/08 12:09 AM, bpdu92 a écrit :
On Mon, 06 Oct 2008 23:52:13 +0200, SAM
wrote:

j'ai donc mis sam.htm et lister.js dans un meme dossier, et
en effet l'anticipation marche (elle s'enrichit à chaque saisie)


Heu ... ce n'est pas normal ... c'est Fx qui te propose ça lui-même :-(
(essayer en tapant des trucs inhabituels comme zzz par ex)


1-tout ce que je tape est mémorisé par IE et FF,
par ex java, sam, zzzz,...et proposé ensuite, sous la fenetre



Oui, peut-être, alors faut essayer avec chaque fois les 2 premières
lettres différentes des autres fois

Mon Fx ne me propose qu'un truc et mon IE ne me propose jamais rien

Le mieux est de zapper ce comportement qui ne nous intéresse pas
relativement au problème du "comment fait Google" pour recharger des
nouveaux trucs *sans* Ajax.


2- FF propose Google/Yahoo, dans le déroulant à droite, aprés le 2eme
car saisi



Ouf! ça marche ;-)
(des données non visibles dans le source s'affichent)

IE 6 n'affiche rien, l'ascenseur reste vide



Oui, bon, ... IE ... !

Je viens d'essayer : ça fonctionne normalement, l'ascenseur se remplit.
Mauvais IE, changer d'IE.

Et ça fonctionne encore mieux quand on a ajouté le fichier 'recherche.php'
qui simule(*) un résultat d'appel (via JS) au serveur

(*) la nouvelle liste est pré-établie au lieu d'être construire en
fonction de la frappe


Rappel, 'recherche.php' contiendrait par exemple :

liste = [
['fr.wikipedia.org/wiki/JavaScript','JavaScript wikipedia'],
['www.editeurjavascript.com/', 'Editeur JavaScript'],
['www.toutjavascript.com/', 'Tout JavaScript'],
['developer.mozilla.org/fr/JavaScript', 'JavaScript MDC'],
['www.commentcamarche.net/javascript/jsintro.php3',
'JavaScript comment ça marche'],
['www.jejavascript.net/ ', 'Programmation en JavaScript'],
['www.easy-script.com/scripts-javascript/ ',
'Scripts JavaScript classés']
];


Nota : il a été convenu qu'on ne s'intéressait pas à la mise en forme
(liste dessous et accessible par simple touche fleche basse et
changement/sélection par touche Entree)
il faut donc aller cliquer volontairement dans le menu déroulant à côté.
--
sm
1 2