11484 sujets

JavaScript, DOM et API Web HTML5

Moteur de recherche

bonjour, je debute en js et je cherche comment faire en sorte que m'a barre de recherche marche

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="index.css">
	<script src="https://kit.fontawesome.com/7505b65026.js"></script>
	<title></title>
</head>
<body>
	<div class="recherche">
		<input type="text" name="recherche" placeholder="Recherche">
		<a href=""><i class="fas fa-search"></i></a>
	</div>
</body>
</html>


.recherche{
background-image: radial-gradient(circle at top left, yellow, red);
position: absolute;
padding:  10px;
border-radius: 50px;
width: 80vw;
margin: 0vh 10vw;

}
input{
	padding: 5px;
	border: none;
	background:none;
	outline: none;
	width: 77vw;
}
i{
	color: black;
}


[modération]petite correction de mise en forme du code[/modération]
Modifié par niuxe (21 Jan 2020 - 00:42)
Modérateur
Et l'eau,

Si c'est une recherche à même la page, le js est ton ami. Si la recherche est du côté serveur (rechercher un texte dans un article), tu peux utiliser le JS (nodeJS) ou autres langages tels que le Python/PHP/Ruby/Java/etc.

À noter que ta sémantique n'est pas bonne. Tu dois créer un formulaire en méthode GET qui va renvoyer vers un controlleur (en générale c'est un fichier à part pour faire ce genre de choses). Pour soumettre ton formulaire, tu dois utiliser un button type submit ou de type image. Tu as aussi à ta disposition un input de type submit ou image. Tu as le choix ! Tu utilises ce genre d'élément suivant le cas.

Par contre, pour ce genre de choses, tu dois acquérir des compétences complémentaires (voir plus haut). En attendant, je t'invite à corriger ton html.
Modifié par niuxe (21 Jan 2020 - 00:58)
Administrateur
Bonjour,

il manque aussi une étiquette (label) à ton formulaire, pas mal d'explications ici (y compris "comment relier champ et étiquette") https://disic.github.io/guide-integrateur/6-formulaires.html

niuxe > Bien tenté le button type image mais vu qu'on peut justement mettre une image dans cet élément, je suis allé vérifier et nan ça n'existe pas Smiley lol (mais +1 pour avoir pensé à ce type-là pour input)
Modérateur
Felipe a écrit :
Bonjour,

il manque aussi une étiquette (label) à ton formulaire, pas mal d'explications ici (y compris "comment relier champ et étiquette") https://disic.github.io/guide-integrateur/6-formulaires.html


un gros +1

Felipe a écrit :

niuxe &gt; Bien tenté le button type image mais vu qu'on peut justement mettre une image dans cet élément, je suis allé vérifier et nan ça n'existe pas Smiley lol (mais +1 pour avoir pensé à ce type-là pour input)


rooooh Smiley confused
bien vu Smiley smile
Modifié par niuxe (23 Jan 2020 - 00:24)
Modérateur
Bonjour Jean-Pierre Bruneau,

Les choses ont peut-être évolué, mais à l'époque, quand j'avais étudié la solution offerte par Google pour l'intégration d'un moteur de recherche intégrée au site, j'avais remarqué ceci :

1. C'était gratuit, mais avec des publicités vers des sites concurrents dans les résultats, à moins d'être un organisme particulier comme un organisme sans but lucratif. Cela ne faisait pas très professionnel pour un site pro.

2. Nous n'avions pas beaucoup de contrôle sur la fréquence de mise à jour de l'index. Sur un site Web dont le contenu change régulièrement, c'était problématique.

Je vais me remettre à jour sous peu concernant leur solution.
Sujet clos
Aller à