Add of the press enter to search

This commit is contained in:
2023-05-28 09:34:10 +01:00
parent ffe6c3c4cd
commit 389ccbaf8c
3 changed files with 37 additions and 13 deletions

View File

@@ -48,8 +48,8 @@
<button class="button" onclick="revue()">Article de revue</button>
<button class="button" onclick="communication()">Communication</button>
<button class="button" onclick="reset()">Toutes</button>
<input type="text" id="entry_text" placeholder="Saisir texte">
<button class="button" id="search_button" onclick="search()">Rechercher</button>
<input type="text" id="entry_text" placeholder="Saisir texte" onkeypress="search(event)">
<button class="button" id="search_button" onclick="search(event)">Rechercher</button>
</div>
<div class="publi">
<p><img src="src/img/publications/pink square.png" alt="pink square" class="squares">

View File

@@ -34,6 +34,8 @@ img{
font-size: 16px;
margin-right: 10px;
margin-left: 10px;
border-radius: 20px;
cursor: pointer;
}
.publi{

View File

@@ -1,20 +1,42 @@
function search() {
const searchInput = document.getElementById('entry_text');
const searchTerm = searchInput.value.trim().toLowerCase(); // on récupère le terme recherché en minuscule
const paragraphs = document.querySelectorAll('.publi p'); // on prend tous les paragraphes
function search(event) {
//ajout de la fonction entrée pour la recherche
if(event.key === 'Enter'){
const searchInput = document.getElementById('entry_text');
const searchTerm = searchInput.value.trim().toLowerCase(); // on récupère le terme recherché en minuscule
const paragraphs = document.querySelectorAll('.publi p'); // on prend tous les paragraphes
for (let i = 0; i < paragraphs.length; i++) { // boucle qui parcourt tous les paragraphes
const paragraph = paragraphs[i];
const paragraphText = paragraph.textContent.toLowerCase(); // on récupère le texte du paragraphe en minuscule
for (let i = 0; i < paragraphs.length; i++) { // boucle qui parcourt tous les paragraphes
const paragraph = paragraphs[i];
const paragraphText = paragraph.textContent.toLowerCase(); // on récupère le texte du paragraphe en minuscule
if (paragraphText.includes(searchTerm)) { //on cherche si le texte du paragraphe contient le terme recherché
paragraph.style.display = 'block'; // si oui, on affiche le paragraphe
} else {
paragraph.style.display = 'none'; // sinon, on le cache
if (paragraphText.includes(searchTerm)) { //on cherche si le texte du paragraphe contient le terme recherché
paragraph.style.display = 'block'; // si oui, on affiche le paragraphe
} else {
paragraph.style.display = 'none'; // sinon, on le cache
}
}
}
//ajout de la fonction click pour la recherche
else{
const searchInput = document.getElementById('entry_text');
const searchTerm = searchInput.value.trim().toLowerCase(); // on récupère le terme recherché en minuscule
const paragraphs = document.querySelectorAll('.publi p'); // on prend tous les paragraphes
for (let i = 0; i < paragraphs.length; i++) { // boucle qui parcourt tous les paragraphes
const paragraph = paragraphs[i];
const paragraphText = paragraph.textContent.toLowerCase(); // on récupère le texte du paragraphe en minuscule
if (paragraphText.includes(searchTerm)) { //on cherche si le texte du paragraphe contient le terme recherché
paragraph.style.display = 'block'; // si oui, on affiche le paragraphe
} else {
paragraph.style.display = 'none'; // sinon, on le cache
}
}
}
}
function revue(){
const searchTerm = 'pink square'; // recherche de 'pink square'
const paragraphs = document.querySelectorAll('.publi p'); // on prend tous les paragraphes