Autocomplete

Présentation

Voici le HTML de base utilisé par le module Autocomplete.

<div class="wpeo-autocomplete">
	<label class="autocomplete-label" for="mon-autocomplete">
		<i class="autocomplete-icon-before far fa-search"></i>
		<input id="mon-autocomplete" autocomplete="off" placeholder="Recherche..." class="autocomplete-search-input" type="text" />
		<span class="autocomplete-icon-after"><i class="far fa-times"></i></span>
	</label>
	<ul class="autocomplete-search-list">
		<li class="autocomplete-result">
			<div class="autocomplete-result-container">
				<span class="autocomplete-result-title">Résultat 1</span>
			</div>
		</li>
	</ul>
</div>
  • Résultat 1

Pour apprendre à utiliser le module, rendez-vous sur cette page :

Utiliser le module Autcomplete

Si vous continuez ici, vous apprendrez à personnaliser le module Autocomplete grâce au HTML.

Icones

Le module possèdent deux icones. Une avant le texte de la recherche et une icone après.

autocomplete-icon-before

L’icône avant le texte. Représente, par défaut, une loupe.
Vous pouvez remplacer les classes far fa-search par celles qui vous intéresse. Voir toutes les icones.

<i class="autocomplete-icon-before far fa-search"></i>

autocomplete-icon-after

L’icône après le texte. Représente, par défaut, une croix.
Vous pouvez remplacer les classes far fa-times par celles qui vous intéresse. Voir toutes les icones.

<span class="autocomplete-icon-after"><i class="far fa-times"></i></span>

 

Couleur

  • Gris (par défaut) : .autocomplete-grey
  • Blanc : autocomplete-light
<div class="wpeo-autocomplete autocomplete-light">
...
</div>
  • Résultat 1
  • Résultat 1

Taille

  • autocomplete-small  Contenu taille 200px
  • autocomplete-medium  Contenu taille 300px (par défaut)
  • autocomplete-large  Contenu taille 400px

Personnalisation du résultat

Résultat standard

		<li class="autocomplete-result">
			<div class="autocomplete-result-container">
				<span class="autocomplete-result-title">Résultat</span>
			</div>
		</li>
  • Résultat

Résultat non cliquable

La classe autocomplete-result se change en autocomplete-result-text

		<li class="autocomplete-result-text">
			<div class="autocomplete-result-container">
				<span class="autocomplete-result-title">Pas de résultats</span>
				<span class="autocomplete-result-subtitle">Essayez en changeant les mots clés</span>
			</div>
		</li>
  • Pas de résultats Essayez en changeant les mots clés

Résultat avancé

		<li class="autocomplete-result">
			<img class="autocomplete-result-image" src="https://pbs.twimg.com/profile_images/378800000483044729/a9887ba5faac56724e7988ce95c5bab0_normal.png" />
			<div class="autocomplete-result-container">
				<span class="autocomplete-result-title">Titre</span>
				<span class="autocomplete-result-subtitle">Sous-titre</span>
			</div>
		</li>
  • Titre Sous-titre