tag search
This commit is contained in:
parent
693188666c
commit
fb1cbb1c4e
@ -21,6 +21,7 @@
|
||||
{% block foot %}
|
||||
{% endblock %}
|
||||
<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>
|
||||
if ('serviceWorker' in navigator) {
|
||||
|
@ -7,10 +7,13 @@
|
||||
<div class="[ wrapper ]">
|
||||
<h1 class="[ member-list__heading ]">{{ teamListHeading }}</h1>
|
||||
{{ content | safe }}
|
||||
<h2 class="[ gap-top-700 ]">{{ tagSearchHeading }}</h2>
|
||||
<ul class="tag-list mt-3">
|
||||
<div class="search-bar">
|
||||
<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 %}
|
||||
<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 %}
|
||||
</ul>
|
||||
</div>
|
||||
@ -18,5 +21,5 @@
|
||||
{% include "partials/components/map.njk" %}
|
||||
{% include "partials/components/contact-form.njk" %}
|
||||
</main>
|
||||
|
||||
|
||||
{% endblock %}
|
||||
|
14
src/js/components/search.js
Normal file
14
src/js/components/search.js
Normal 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');
|
||||
}
|
||||
}
|
||||
}
|
16
src/scss/components/_search-bar.scss
Normal file
16
src/scss/components/_search-bar.scss
Normal 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);
|
||||
}
|
||||
}
|
@ -76,5 +76,6 @@ img {
|
||||
@import 'components/partner';
|
||||
@import 'components/skip-link';
|
||||
@import 'components/video-player';
|
||||
@import 'components/search-bar';
|
||||
@import 'components/tags';
|
||||
@import 'utilities/responsive';
|
||||
|
Loading…
Reference in New Issue
Block a user