Account search w/ autocomplete

kfet/autocomplete.py

@@ -77,3 +77,29 @@ def account_create(request):
     data['options'] = options
 
     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)

kfet/templates/kfet/account_search_autocomplete.html

@@ -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>
+

kfet/templates/kfet/kpsul.html

@@ -4,6 +4,7 @@
 {% 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/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/reconnecting-websocket.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>';
             } else {
                 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);
     }
 
+    // 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
     function resetAccountData() {
         account_data = account_data_default;