[(#AUTORISER{configurer,_fontawesome5}|sinon_interdire_acces)]

<h1 class="grostitre"><:fontawesome5:titre_page_fontawesome:></h1>

<section id="search">
	<label for="search-input"><i class="fas fa-search" aria-hidden="true"></i><span class="sr-only"><:fontawesome5:rechercher_icone:></span></label>
	<input id="search-input" class="form-control input-lg" placeholder="<:fontawesome5:rechercher_icone:>" autocomplete="off" spellcheck="false" autocorrect="off" tabindex="1">
	<a id="search-clear" href="#" class="fas fa-times-circle hide" aria-hidden="true"><span class="sr-only">Clear search</span></a>
</section>

<B_picto>
<div class="row fontawesome-icon-list">
<BOUCLE_picto (DATA){source tableau,#REM|lister_fontawesome}>
	<div class="item fa-hover bloc-fa-[(#VALEUR|textebrut|attribut_html)]" >
		<div class="icon-meta">
			<div class="icon"><i class="fa-[(#VALEUR|textebrut|attribut_html)]"></i></div>
			<div class="name">[(#VALEUR|substr{0,-4})]</div>
		</div>
		<div class="icon-code">&lt;i class="fa-[(#VALEUR|textebrut|attribut_html)]"&gt;&lt;/i&gt;</div>
	</div>
</BOUCLE_picto>
</div>
</B_picto>

<script type="text/javascript">
jQuery(document).ready(function(){
	$.expr[":"].contains_ci = $.expr.createPseudo(function(arg) {
		return function( elem ) {
			return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
		};
	});

	/**
	* Detect a click in the "Search" button or enter from keyboard
	*/
	$('#search-input').on('click keyup', function(event) {
		// Prevent the original click for not reloading the whole page
		event.preventDefault();

		// Get value from search input
		var searchInputValue = $('#search-input').val();

		// Search the list and if it matches display it, else hide it
		$('.fontawesome-icon-list .item').hide().find('.name:contains_ci(' + searchInputValue + ')').parents('.item').show();
		});
		$('#search-clear').on('click', function(){
		event.preventDefault();
		$('.fontawesome-icon-list .item').show();
		$('#search-input').val('');
	});

});
</script>