Discussion :

[xcelent88]

Bonjour,

voilà je suis en train de faire un moteur de recherche d'où on peut rechercher plusieurs choses. Le site que je veux faire est semblable à ce site http://www.sputtr.com/. Le design du site est déjà près mais je suis confronter à 2 problèmes. La première est que je ne sais pas comment designer la barre de recherche. J'ai ce script

<input type="text" name="query">
<input type="submit" name="submit" value="Search">

mais il ne me convient pas, car il est trop simple. Je voudrais le faire plus design comme sur http://www.sputtr.com/.


Le site http://www.sputtr.com/ contient une barre de recherche et des boutons où on peut faire plusieurs recherches comme par exemple sur google images, sur yahoo, sur youtube. Voilà, je voudrais savoir comment on programme cela en javascript où même en Ajax.
J'ai des connaissances en javascript mais je débute en Ajax.


Merci

[dream_of_australia]

Je pense que ça ne devrait pas trop te poser de problèmes si tu commences par quelque chose de simple, tu pourras toujours rajouter des effets après.

Tu dois d'abord faire des images comme sur le site que tu nous as montré pour chaque type de recherche.
Dans tes balises images tu fais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="..." alt="..." ... onclick="recherche('typederecherche');" />

A la place de typederecherche, tu mets soit un nombre unique soit un nom unique qui te permettra de distinguer les recherches:
ex : recherche('1'), recherche('2') ... ou recherche('google'), recherche('image')...

Dans ta fonction function recherche(type) { } : tu fais un switch pour distinguer les types de recherche, tu récupères l'expression recherchée par l'utilisateur et tu lances ta recherche. Je ne sais pas quel code tu utilises pour effectuer la recherche, alors après c'est à toi de jouer !

Change ton <input type="text" name="query"> en

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="text" name="query" id="query" />

comme ça dans ta fonction recherche(type) tu peux récupérer l'expression en faisant ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var expression = document.getElementById('query') ;

Si tu veux changer ton <input type="text" /> en une image, fais un <div> avec une image en background contenant ta balise input dedans. (voir les cours de css)

Et pour ton submit, tu fais pareil que pour les images plus haut. Tu fais un <img ... onclick="recherche('typederecherche') />.

Voilà, essaie d'abord de t'aider de ces quelques éléments pour construire ta page. Tu t'occuperas après des effets. J'espère que je t'aurais aidé à avancer !

[xcelent88]

Merci pour ta réponse rapide .

Je vais essayer tout de suite et je te dirais si je reste bloqué.

[xcelent88]

Bon voilà j'ai rencontré un problème. Voilà ce que je viens de faire:

1. Une image pour la recherche sur Youtube par exemple:

<img src="image du boutton" alt="kaka" onclick="recherche('youtube');" />

2. Barre de recherche:

<input type="text" name="query" id="query" />

3. Puis un code que j'ai ajouté que je ne comprends pas tellement bien ce qu'il fait:

<script language="JavaScript">
var expression = document.getElementById('query') ;
</script>

dream_of_australia, tu parles d'une fonction recherche(type) { }. Je ne l'ai pas et je ne sais pas comment la coder. Mais j'ai la page de recherche de Youtube par exemple:

http://www.youtube.com/results?search_query=&search=

J'espère que tu pourra m'aider, car je suis bloqué

Merci

[dream_of_australia]

recherche('type'), c'est la fonction que tu appelles sur le onclick, quand tu dis recherche(youtube), là tu fais une recherche de type youtube.
var expression = document.getElementById récupère l'expression de recherche, celle entrée par l'utilisateur.

Donc tu as ta fonction js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<script type="text/javascript">
function recherche(type) {
  var expression = document.getElementById('query') ; // l'expression recherchee
  ... ... recherche ... ...
}
</script>

Tu veux afficher les résultats dans ta propre page ? Je ne sais pas si tu peux. Tu peux par contre sans problème rediriger l'utilisateur vers le résultat de la recherche sur le site de youtube en faisant un top.location avec la page de youtube et les bons arguments GET.

[xcelent88]

Les résultats je les voudrais poster dans une nouvelle page où en haut il y a des liens publicitaires et la page de youtube s'ouvre en-bas dans une iframe.

Edit:

Voilà ce que je viens de faire:
1. Le bouton:

<img src="image de Youtube" alt="youtube" onclick="recherche('typederecherche');" />

ou
<input type="submit" name="query" id="query" onclick="recherche('typederecherche');"/>

2. La fonction:

<script type="text/javascript">
function recherche(type) {
var expression = document.getElementById('query') ; // l'expression recherchee
.....recherche...
}
</script>

3. La barre:

<input type="text" name="query" id="query" />

Le problème c'est que je n'arrive pas à lancer la recherche. Je ne sais pas où poster ce lien: http://www.youtube.com/results?search_query=&search=

Merci

[dream_of_australia]

Je ne travaille jamais avec les iFrame, désolée. Ca doit être quelque chose dans ce genre-là : parent.frames['nomDeTaFrame'].location.replace('http://www.youtube.com/results?search_query=&search=');
N'oublie pas de mettre d'assigner des valeurs à search_query (à mon avis c'est ton query) et search (voir sur le site de YouTube ce que c'est).