Filtre

• Documentation
• Questions ou commentaires?

• Filtrer des items par section
• Filtrer une liste
• Filtrer un tableau
• Application de filtres de recherche supplémentaires
• Déplacer l'interface vers un élément sécifique
• Interface persionnalisée

Filtrer des items par section

Code source

<div class="wb-filter">
	<section id="enquete-a">
		<h2><span class="wb-inv">Enquêtes débutant par la lettre </span>A</h2>

		<ul class="list-unstyled">
			<li>Achats de grains fourragers</li>
			<li>Activité aéroportuaire, Enquête sur l&#39;</li>
			<li>Activités pétrolières et gazières, Relevé trimestriel des dépenses en immobilisations</li>
			<li>Approvisionnement et l&#39;écoulement du charbon, Enquête mensuelle sur l&#39;</li>
			<li>Approvisionnement et l&#39;écoulement de l&#39;électricité, Enquête mensuelle sur l&#39;</li>
		</ul>
	</section>

	<section id="enquete-b">
		<h2><span class="wb-inv">Enquêtes débutant par la lettre </span>B</h2>

		<ul class="list-unstyled">
			<li>Balance des paiements internationaux du Canada</li>
			<li>Base tarifaire, Enquête sur la</li>
			<li>Biens et services environnementaux, Enquête sur les</li>
			<li>Bilan des investissements internationaux du Canada</li>
			<li>Brevets, licences et redevances fédérales, Enquête sur les</li>
			<li>Bureaux d&#39;agents, de courtiers en immeuble, et d&#39;évaluateurs de biens immobiliers et des activités liées à l&#39;immobilier, Enquête annuelle sur les industries de services</li>
		</ul>
	</section>
	...
</div>

Filtrer une liste

• Alberta
• Colombie-Britannique
• Île-du-Prince-Édouard
• Manitoba
• Nouveau-Brunswick
• Nouvelle-Écosse
• Nunavut
• Ontario
• Québec
• Saskatchewan
• Terre-Neuve-et-Labrador
• Territoires du Nord-Ouest
• Yukon

Code source

<ul class="wb-filter">
	<li>Alberta</li>
	<li>Colombie-Britannique</li>
	<li>Île-du-Prince-Édouard</li>
	<li>Manitoba</li>
	<li>Nouveau-Brunswick</li>
	<li>Nouvelle-Écosse</li>
	<li>Nunavut</li>
	<li>Ontario</li>
	<li>Québec</li>
	<li>Saskatchewan</li>
	<li>Terre-Neuve-et-Labrador</li>
	<li>Territoires du Nord-Ouest</li>
	<li>Yukon</li>
</ul>

Filtrer un tableau

Code source

<table class="wb-filter table">
	<caption>Population de grande municipalité par provinces</caption>
	<thead>
		<tr>
			<th>Municipalité</th>
			<th>Population (2016)</th>
			<th>Population (2011)</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="rowgroup" class="h4" colspan="3">Alberta</th>
		</tr>
		<tr>
			<th>Calgary</th>
			<td>1,239,220</td>
			<td>1,096,833</td>
		</tr>
		<tr>
			<th>Edmonton</th>
			<td>932,546</td>
			<td>812,201</td>
		</tr>
		<tr>
			<th>Red Deer</th>
			<td>100,418</td>
			<td>90,564</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th scope="rowgroup" class="h4" colspan="3">Colombie-Britannique</th>
		</tr>
		<tr>
			<th>Vancouver</th>
			<td>631,486</td>
			<td>603,502</td>
		</tr>
		<tr>
			<th>Surrey</th>
			<td>517,887</td>
			<td>468,251</td>
		</tr>
		<tr>
			<th>Burnaby</th>
			<td>232,755</td>
			<td>233,218</td>
		</tr>
	</tbody>
	...
</table>

Application de filtres de recherche supplémentaires

Le plugiciel de filtre propose trois types de méthodes de recherche : correspondance exacte du modèle (par défaut), opérateur AND et opérateur OR.

Correspondance exacte du modèle (par défaut)

Recherche les éléments qui contiennent exactement ce que l'utilisateur a spécifié.

En ne définissant pas le paramètre filterType, on indiquera au plugiciel de filtre d'appliquer le modèle de recherche par défaut qui correspond exactement au modèle des termes de recherche. Seuls les éléments contenant le modèle complet et exact saisi par l'utilisateur seront affichés.

• Alberta
• Colombie-Britannique
• Île-du-Prince-Édouard
• Manitoba
• Nouveau-Brunswick
• Nouvelle-Écosse
• Nunavut
• Ontario
• Québec
• Saskatchewan
• Terre-Neuve-et-Labrador
• Territoires du Nord-Ouest
• Yukon

Code source

<ul class="wb-filter">
	<li>Alberta</li>
	...
</ul>

Opérateur AND

Recherche les éléments qui contiennent tous les mots spécifiés.

En définissant le paramètre filterType à and, on indiquera au plugiciel de filtre d'appliquer un opérateur AND entre les termes de recherche. Seuls les éléments contenant tous les termes de recherche seront affichés.

• Alberta
• Colombie-Britannique
• Île-du-Prince-Édouard
• Manitoba
• Nouveau-Brunswick
• Nouvelle-Écosse
• Nunavut
• Ontario
• Québec
• Saskatchewan
• Terre-Neuve-et-Labrador
• Territoires du Nord-Ouest
• Yukon

Code source

<ul class="wb-filter" data-wb-filter='{ "filterType": "and" }'>
	<li>Alberta</li>
	...
</ul>

Opérateur OR

Recherche les éléments qui contiennent au moins un des mots spécifiés.

En définissant le paramètre filterType à or, on indiquera au plugiciel de filtre d'appliquer un opérateur OR entre les termes de recherche. Tous les éléments contenant l'un des termes de recherche fournis seront affichés.

• Alberta
• Colombie-Britannique
• Île-du-Prince-Édouard
• Manitoba
• Nouveau-Brunswick
• Nouvelle-Écosse
• Nunavut
• Ontario
• Québec
• Saskatchewan
• Terre-Neuve-et-Labrador
• Territoires du Nord-Ouest
• Yukon

Code source

<ul class="wb-filter" data-wb-filter='{ "filterType": "or" }'>
	<li>Alberta</li>
	...
</ul>

Déplacer l'interface vers un élément sécifique

Définissez le paramètre source à un sélecteur jQuery dans lequel vous souhaitez contenir l'interface utilisateur du filtre. L'interface utilisateur sera ajoutée en haut (préfixe) de l'élément défini.

Code source

<div class="row">
	<div class="col-md-4">
		<div id="filterUIContainer"></div>
	</div>
	<div class="col-md-8">
		<ul class="wb-filter" data-wb-filter='{ "source": "#filterUIContainer" }'>
			<li>Alberta</li>
			...
		</ul>
	</div>
</div>

Interface persionnalisée

Personnalisez l'interface utilisateur générée par le plugiciel en ajoutant un élément et en définissant l'option uiTemplate à son sélecteur CSS.

• Alberta
• Colombie-Britannique
• Île-du-Prince-Édouard
• Manitoba
• Nouveau-Brunswick
• Nouvelle-Écosse
• Nunavut
• Ontario
• Québec
• Saskatchewan
• Terre-Neuve-et-Labrador
• Territoires du Nord-Ouest
• Yukon

Source code

<div id="filterTemplate">
	<div class="form-group">
		<label for="customSearchUI">Rechercher</label>
		<input type="search" class="form-control" placeholder="Tapez le nom d'une province..." id="customSearchUI">
	</div>
	<p class="wb-fltr-info"><span data-nbitem></span> / <span data-total></span> provinces</p>
</div>
<ul class="wb-filter" data-wb-filter='{
	"uiTemplate": "#filterTemplate"
}'>
	<li>Alberta</li>
	...
</ul>

Date de modification :

2018-05-23