Créer une barre de recherche extensible ...

Bonjour à tous,

en fait, j'aimerais savoir ce que vous pensez de la barre de recherche que je compte mettre sur mon site.

En fait, j'aimerais bien avoir 2 boutons (images) avec une loupe de différente couleur. Naturellement, j'aurais également un champ de texte pour la recherche. J'aimerais que quand l'utilisateur clique sur la 1ère image (bouton) que le champ de recherche d'agrandisse et que cette image (bouton) disparaisse pour laisser apparaître l'autre image (bouton). Quand l'utilisateur cliquera sur cette autre image (bouton), ce sera pour soumettre le formulaire et donc, lancer la recherche.

Naturellement, les 3 éléments seraient positionnés au même endroit (champ de texte, 1ère et 2 ème images). Ce serait la 1ère image qui serait affichée afin de permettre l'extension de la barre de recherche.

Voici comment je compte implémenter la solution au niveau HTML :

<div class="search-bar">
	<form id="form-search" class="form-search" method="GET" action="../../app/Search/search.php">
		<div class="search-box"> 
			<input type="text" name="search-input" id="search-input" class="search-input" placeholder="" />
		</div>
		<div class="search-actions">
			<img src="../public/img/magnifying_glass_white.png" id="bt-expand" class="bt-expand" alt="extension" />
			<img src="../public/img/magnifying_glass_black.png" id="bt-search" class="bt-search" alt="recherche" />
		</div>
	</form>
</div>

Voici également le code CSS actuel mais, malheureusement, il n'y a pas grand chose qui fonctionne car je ne maîtrise pas du tout le positionnement entre autre :

.search-bar {
  float: right;
}  

.form-search {
  display: inline-block;
  position: relative;
  top: 10px;
  right: 15px;
}

.search-input {
  padding: 5px 5px 5px 20px;
  margin-right: 15px;
  border: none;
  outline: none;
  width: 0px;
  height: 15px;
  transition: width 0.5s;
  -webkit-transition: width 0.5s;
  -moz-transition: width 0.5s;
  -o-transition: width 0.5s;
  -ms-transition: width 0.5s;
}

.bt-expand {
  background-color: #222A35;
}

.bt-expand:focus {
  width: 200px;
  border: 3px solid #FFF;
  border-radius: 40px;
  cursor: auto;
}

.bt-expand:hover, .bt-search:hover {
  cursor: pointer;
}

#search-input .expandable {
  width: 200px;
  border: 3px solid #FFF;
  border-radius: 40px;
}

#bt-expand .expandable {
  visibility: hidden;
}

#bt-search .expandable {
  visibility: visible;
}

.search-result {
  background-color: #f6f6f6;
}

/* Pour tout ce qui est au-dessus de 640px */
@media only screen and (min-width: 640px) {
  .form-search {
      margin: 0 auto;
  }

  .search-result {
      margin-left: 235px;
  }
}

Finalement, afin d'étendre la barre de progression quand on clique sur la 1ère image (button), j'aurai un événement click en javascript qui va ajouter une classe qui permettra d'étendre la barre de recherche et de cacher la 1ère image (bouton) pour afficher la 2ème image (bouton).

    $('#bt-expand').on('click', function(e) {
        $('#bt-expand').toggleClass('expandable');
        $('#bt-search').toggleClass('expandable');
        $('#search-input').toggleClass('expandable');
    });

La classe "expandable" est bien ajoutée sur les 3 éléments mais le code CSS de cette classe ne s'applique pas sur ces éléments ?

J'aurai également un second événement javascript qui soumettra le formulaire quand on cliquera sur la 2ème image (bouton).

Qu'en pensez-vous ?

Merci d'avance

Bonne journée
Thierry
Modifié par THIRT05 (13 Aug 2019 - 12:45)