kpsul/bds/templates/bds/nav.html
2020-08-28 18:23:19 +02:00

57 lines
1.5 KiB
HTML

{% load i18n %}
{% load static %}
<nav id="search-bar" class="level">
<div class="level-item" id="logo">
<figure class="image is-64x64">
<a href="{% url "bds:home" %}">
<img src="{% static "bds/images/logo_square.svg" %}" alt="bds-logo">
</a>
</figure>
</div>
<div class="level-item" id="logout-mobile">
<figure class="image is-64x64">
<a href="{% url 'authens:logout' %}">
<img src="{% static "bds/images/logout.svg" %}" alt="logout">
</a>
</figure>
</div>
<div class="level-item" id="search-input">
<input
class="input"
type="text"
name="q"
id="search_autocomplete"
spellcheck="false"
placeholder="{% trans "Chercher une personne" %}" />
<div class="yourlabs-autocomplete"></div>
</div>
<div class="level-item" id="logout">
<figure class="image is-64x64">
<a href="{% url 'authens:logout' %}">
<img src="{% static "bds/images/logout.svg" %}" alt="logout">
</a>
</figure>
</div>
</nav>
<script type="text/javascript">
$(document).ready(function() {
$('input#search_autocomplete').yourlabsAutocomplete({
url: '{% url 'bds:autocomplete' %}',
minimumCharacters: 3,
id: 'search_autocomplete',
choiceSelector: 'li:has(a)',
box: $(".yourlabs-autocomplete"),
});
$('input#search_autocomplete').bind(
'selectChoice',
function(e, choice, autocomplete) {
window.location = choice.find('a:first').attr('href');
}
);
});
</script>