Account search w/ autocomplete

This commit is contained in:
Ludovic Stephan 2017-01-19 12:36:40 -02:00
parent eff37f6c89
commit e7956f3b62
3 changed files with 78 additions and 1 deletions

View file

@ -77,3 +77,29 @@ def account_create(request):
data['options'] = options data['options'] = options
return render(request, "kfet/account_create_autocomplete.html", data) return render(request, "kfet/account_create_autocomplete.html", data)
def account_search(request):
if "q" not in request.GET:
raise Http404
q = request.GET.get("q")
words = q.split()
data = {'q': q}
for word in words:
query = Account.objects.filter(
Q(cofprofile__user__username__icontains=word) |
Q(cofprofile__user__first_name__icontains=word) |
Q(cofprofile__user__last_name__icontains=word)
).distinct()
query = [(account.trigramme, account.cofprofile.user.get_full_name())
for account in query]
data['accounts'] = query
options = len(query)
data['options'] = options
return render(request, 'kfet/account_search_autocomplete.html', data)

View file

@ -0,0 +1,14 @@
{% load kfet_tags %}
<ul>
{% if accounts %}
{% for trigramme, user in accounts %}
<li><span class="choice">{{ user|highlight_text:q }} (<span class="trigramme">{{ trigramme }}</span>)</li>
{% endfor %}
{% elif not q %}
<li class="user_category"><span class="text">Pas de recherche, pas de résultats !</span></li>
{% else %}
<li class="user_category"><span class="text">Aucune correspondance trouvée :-(</span></li>
{% endif %}
</ul>

View file

@ -4,6 +4,7 @@
{% block extra_head %} {% block extra_head %}
<link rel="stylesheet" style="text/css" href="{% static 'kfet/css/jquery-ui.min.css' %}"> <link rel="stylesheet" style="text/css" href="{% static 'kfet/css/jquery-ui.min.css' %}">
<link rel="stylesheet" style="text/css" href="{% static 'kfet/css/kpsul_grid.css' %}"> <link rel="stylesheet" style="text/css" href="{% static 'kfet/css/kpsul_grid.css' %}">
<script src="{% static "autocomplete_light/autocomplete.js" %}" type="text/javascript"></script>
<script type="text/javascript" src="{% static 'kfet/js/js.cookie.js' %}"></script> <script type="text/javascript" src="{% static 'kfet/js/js.cookie.js' %}"></script>
<script type="text/javascript" src="{% static 'kfet/js/reconnecting-websocket.js' %}"></script> <script type="text/javascript" src="{% static 'kfet/js/reconnecting-websocket.js' %}"></script>
<script type="text/javascript" src="{% static 'kfet/js/jquery-ui.min.js' %}"></script> <script type="text/javascript" src="{% static 'kfet/js/jquery-ui.min.js' %}"></script>
@ -256,12 +257,48 @@ $(document).ready(function() {
buttons += '<a href="'+url_base+'?trigramme='+trigramme+'" class="btn btn-primary" target="_blank" title="Créer"><span class="glyphicon glyphicon-plus"></span></a>'; buttons += '<a href="'+url_base+'?trigramme='+trigramme+'" class="btn btn-primary" target="_blank" title="Créer"><span class="glyphicon glyphicon-plus"></span></a>';
} else { } else {
var url_base = '{% url 'kfet.account' %}' var url_base = '{% url 'kfet.account' %}'
buttons += '<a href="'+url_base+'" class="btn btn-primary" target="_blank" title="Rechercher"><span class="glyphicon glyphicon-search"></span></a>'; buttons += '<button class="btn btn-primary search" title="Rechercher"><span class="glyphicon glyphicon-search"></span></button>';
} }
} }
account_container.find('.buttons').html(buttons); account_container.find('.buttons').html(buttons);
} }
// Search for an account
function searchAccount() {
var content = '<input type="text" name="q" id="search_autocomplete" spellcheck="false" autofocus><div class="yourlabs-autocomplete"></div>' ;
$.dialog({
title: 'Recherche de compte',
content: content,
backgroundDismiss: true,
animation: 'top',
closeAnimation: 'bottom',
keyboardEnabled: true,
onOpen: function() {
var that=this ;
$('input#search_autocomplete').yourlabsAutocomplete({
url: '{% url 'kfet.account.search.autocomplete' %}',
minimumCharacters: 2,
id: 'search_autocomplete',
choiceSelector: '.choice',
placeholder: "Chercher un utilisateur K-Fêt",
box: $(".yourlabs-autocomplete"),
});
$('input#search_autocomplete').bind(
'selectChoice',
function(e, choice, autocomplete) {
autocomplete.hide() ;
triInput.val(choice.find('.trigramme').text()) ;
triInput.trigger('input') ;
that.close() ;
});
}
});
}
account_container.on('click', '.search', function () {
searchAccount() ;
}) ;
// Clear data // Clear data
function resetAccountData() { function resetAccountData() {
account_data = account_data_default; account_data = account_data_default;