BDS: user search on the home page

This commit is contained in:
Martin Pépin 2020-06-07 20:58:33 +02:00
parent bca75dbf98
commit 5d24786e20
No known key found for this signature in database
GPG key ID: E7520278B1774448
6 changed files with 137 additions and 1 deletions

View file

@ -0,0 +1,70 @@
html, body {
padding: 0;
margin: 0;
background: #ddcecc;
font-size: 18px;
}
a {
text-decoration: none;
color: inherit;
}
/* header */
nav {
background: #3d2464;
width: 100%;
text-align: center;
padding: 0.4em 0;
}
input[type="text"] {
font-size: 18px;
}
#search_autocomplete {
width: 480px;
margin: 0;
border: 0;
padding: 10px 10px;
}
.highlight {
text-decoration: underline;
font-weight: bold;
}
.yourlabs-autocomplete ul {
width: 500px;
list-style: none;
padding: 0;
margin: 0;
}
.yourlabs-autocomplete ul li {
height: 2em;
line-height: 2em;
width: 500px;
padding: 0;
}
.yourlabs-autocomplete ul li.hilight {
background: #e8554e;
}
.autocomplete-item {
display: block;
width: 480px;
height: 100%;
padding: 2px 10px;
margin: 0;
}
.autocomplete-header {
background: #b497e1;
}
.autocomplete-value, .autocomplete-new, .autocomplete-more {
background: white;
}

View file

@ -0,0 +1,23 @@
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<title>{{ site.name }}</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
{# CSS #}
<link rel="stylesheet" href="{% static "bds/css/bds.css" %}">
{# Javascript #}
<script src="{% static 'vendor/jquery/jquery-3.3.1.min.js' %}"></script>
<script src="{% static "vendor/jquery/jquery.autocomplete-light.min.js" %}"></script>
</head>
<body>
{% include "bds/nav.html" %}
{% block content %}{% endblock %}
</body>
</html>

View file

@ -0,0 +1,7 @@
{% extends "bds/base.html" %}
{% block content %}
<div style="margin: auto; text-align: center; padding-top: 2em;">
Bienvenue sur le site du BDS!
</div>
{% endblock %}

View file

@ -0,0 +1,29 @@
{% load i18n %}
<nav id="search-bar">
<input
type="text"
name="q"
id="search_autocomplete"
spellcheck="false"
placeholder="{% trans "Chercher une personne" %}" />
<div class="yourlabs-autocomplete"></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>

View file

@ -4,5 +4,6 @@ from bds import views
app_name = "bds"
urlpatterns = [
path("", views.Home.as_view(), name="home"),
path("autocomplete", views.AutocompleteView.as_view(), name="autocomplete"),
]

View file

@ -13,5 +13,11 @@ class AutocompleteView(TemplateView):
raise Http404
q = self.request.GET["q"]
ctx["q"] = q
ctx.update(bds_search.search(q.split()))
results = bds_search.search(q.split())
ctx.update(results)
ctx["total"] = sum((len(r) for r in results.values()))
return ctx
class Home(TemplateView):
template_name = "bds/home.html"