Add basic autocomplete for @

group/templates/group/group_info.html

@@ -85,7 +85,7 @@
 
 <div id="group-reply">
     <h3>信息栏</h3>
-    <form action="" method="post">
+    <form id="group-message-form" action="" method="post">
         <textarea name="message" id="message">{{ form.data.message }}</textarea><br />
         {% for error in form.message.errors %}
         <p class="error">{{ error|escape }}</p>
@@ -191,6 +191,15 @@
 addConfirmTo($('#quit-group'), '确定要退出？');
 addConfirmTo($('.cancel-share'), '确定要取消共享该目录？');
 
+$(function() {
+    var member_list = [];
+    {% for member in members %}
+    member_list.push('{{ member.user_name|email2nickname}}');
+    {% endfor %}
+
+    addAtAutocomplete('#message', '#group-message-form', member_list);
+});
+
 $("table tr:gt(0)").hover(
     function() {
         $(this).find('img').css('cursor', 'pointer').removeClass('vh');

group/views.py

@@ -245,6 +245,7 @@ def render_group_info(request, group_id, form):
     return render_to_response("group/group_info.html", {
             "managers": managers,
             "common_members": common_members,
+            "members": members,
             "repos": repos,
             "group_id": group_id,
             "group" : group,

media/css/seahub.css

@@ -943,3 +943,19 @@ p {
     background:#646464;
     font-size:14px;
 }
+
+/* scroll result for autocomplete  */
+.ui-autocomplete {
+    max-height: 200px;
+    overflow-y: auto;
+    /* prevent horizontal scrollbar */
+    overflow-x: hidden;
+    /* add padding to account for vertical scrollbar */
+    padding-right: 20px;
+}
+/* IE 6 doesn't support max-height
+ * we use height instead, but this forces the menu to always be this tall
+ */
+* html .ui-autocomplete {
+    height: 100px;
+}

media/js/utils.js

@@ -1,3 +1,5 @@
+/* -*- Mode: Java; tab-width: 4; indent-tabs-mode: nil; c-basic-offset: 4 -*- */
+
 //add op confirm dialog
 var Op_url = '';
 function addConfirmTo(ele, confirm_con) {
@@ -73,6 +75,53 @@ function addAutocomplete(ele_id, container_id, data) {
         });
 }
 
+/*
+ * func: add autocomplete for `@` to some input ele
+ * @param ele_id: autocomplete is added to this ele(ment), e.g-'#xxx'
+ * @param container_id: id of autocomplete's container, often container of element above
+ * @param data: tip data in array, e.g- ['xx', 'yy']
+ */
+function addAtAutocomplete(ele_id, container_id, data) {
+    function split(val) {
+        return val.split(/\ \s*/);
+    }
+    function extractLast(term) {
+        return split(term).pop();
+    }
+
+    $(ele_id)
+        .bind("keydown", function(event) {
+            if (event.keyCode === $.ui.keyCode.TAB &&
+                $(this).data("autocomplete").menu.active) {
+                event.preventDefault();
+            }
+        })
+        .autocomplete({
+            appendTo: container_id,
+            autoFocus: true,
+            delay: 100,
+            minLength: 0,
+            source: function(request, response) {
+                    var lastTerm = extractLast(request.term);
+                    var lastIndex = lastTerm.lastIndexOf('@');
+                    if (lastIndex >= 0) {
+                        response($.ui.autocomplete.filter(data, lastTerm.substring(lastIndex+1)));
+                    }
+            },
+            focus: function() {
+                   return false;
+            },
+            select: function(event, ui) {
+                    var terms = split(this.value);
+                    var popTerm = terms.pop();
+                    terms.push(popTerm.concat(ui.item.value));
+                    terms.push("");
+                    this.value = terms.join(" ");
+                    return false;
+            }
+        });
+}
+
 function filesizeformat(bytes, precision)
 {  
     var kilobyte = 1024;

templates/snippets/myhome_extra_script.html

@@ -13,7 +13,6 @@ $(function() {
         $("#repo_id").val($(this).attr("data"));
         $("#repo-share-form").modal({appendTo: "#main"});
         addAutocomplete('#email_or_group', '#repo-share-form', share_list);
-        $('.ui-autocomplete').css({'max-height': window.innerHeight - $('.ui-autocomplete-input').offset().top - $('.ui-autocomplete-input').height() - 10, 'overflow': 'auto'});
     });
 
     //check before post