tag search

This commit is contained in:
Yves Gatesoupe 2021-12-01 15:54:48 +01:00
parent 693188666c
commit fb1cbb1c4e
5 changed files with 39 additions and 4 deletions

View File

@ -21,6 +21,7 @@
{% block foot %} {% block foot %}
{% endblock %} {% endblock %}
<script type="text/javascript" src="/js/components/menu-toggle.js" async defer></script> <script type="text/javascript" src="/js/components/menu-toggle.js" async defer></script>
<script type="text/javascript" src="/js/components/search.js" async defer></script>
<script type="text/javascript" src="/vendor/js/bootstrap.min.js" async defer></script> <script type="text/javascript" src="/vendor/js/bootstrap.min.js" async defer></script>
<script> <script>
if ('serviceWorker' in navigator) { if ('serviceWorker' in navigator) {

View File

@ -7,10 +7,13 @@
<div class="[ wrapper ]"> <div class="[ wrapper ]">
<h1 class="[ member-list__heading ]">{{ teamListHeading }}</h1> <h1 class="[ member-list__heading ]">{{ teamListHeading }}</h1>
{{ content | safe }} {{ content | safe }}
<h2 class="[ gap-top-700 ]">{{ tagSearchHeading }}</h2> <div class="search-bar">
<ul class="tag-list mt-3"> <label for="site-search">Filtrer par mots-clés :</label>
<input type="search" id="searchInput" name="q" aria-label="Filtrer par mots-clés" oninput="doSearch()">
</div>
<ul class="tag-list mt-3" id="tagList">
{% for skill in collections.skillsList %} {% for skill in collections.skillsList %}
<li class="tag-item"><a href="/equipe/{{ skill }}">{{ skill }}</a></li> <li class="tag-item visually-hidden"><a href="/equipe/{{ skill }}">{{ skill }}</a></li>
{% endfor %} {% endfor %}
</ul> </ul>
</div> </div>
@ -18,5 +21,5 @@
{% include "partials/components/map.njk" %} {% include "partials/components/map.njk" %}
{% include "partials/components/contact-form.njk" %} {% include "partials/components/contact-form.njk" %}
</main> </main>
{% endblock %} {% endblock %}

View File

@ -0,0 +1,14 @@
function doSearch() {
const searchStr = document.getElementById('searchInput').value;
const tagList = document.getElementById('tagList').getElementsByClassName('tag-item');
for (const tag of tagList) {
const value = tag.querySelector('a').innerHTML;
if (searchStr.length && value.toLowerCase().match(searchStr.toLowerCase())) {
tag.classList.remove('visually-hidden');
} else {
tag.classList.add('visually-hidden');
}
}
}

View File

@ -0,0 +1,16 @@
.search-bar {
display: flex;
align-items: center;
// justify-content: flex-end;
margin-top: 3rem;
label {
// flex-grow: 1;
}
input[type=search] {
width: auto;
margin: 0 0 0 1rem;
background-color: var(--color-light-gray);
}
}

View File

@ -76,5 +76,6 @@ img {
@import 'components/partner'; @import 'components/partner';
@import 'components/skip-link'; @import 'components/skip-link';
@import 'components/video-player'; @import 'components/video-player';
@import 'components/search-bar';
@import 'components/tags'; @import 'components/tags';
@import 'utilities/responsive'; @import 'utilities/responsive';