Use ajax in group message autocomplete

group/templates/group/group_info.html

@@ -161,13 +161,7 @@ addConfirmTo($('#quit-group'), '确定要退出？');
 addConfirmTo($('.cancel-share'), '确定要取消共享该目录？');
 
 $(function() {
-    var member_list = [], nickname, pinyin;
+    addAtAutocomplete('#message', '#group-message-form', {{ group.id }}, "{% url 'group_attention' %}", {'border':'1px solid #ddd', 'width':'600px', 'height': '80px', 'word-wrap':'break-word', 'overflow-y':'auto', 'line-height': '1.5em'}); // remember to add unit (px or em) to line-height, as js in ie will take 1.5 as 1.5, not 1.5em
-    {% for member in members %}
-    nickname = '{{ member.user_name|email2nickname }}';
-    pinyin = '{{ member.user_name|email2nickname|char2pinyin }}';
-    member_list.push({value:nickname + pinyin, label:nickname});
-    {% endfor %}
-    addAtAutocomplete('#message', '#group-message-form', member_list, {'border':'1px solid #ddd', 'width':'600px', 'height': '80px', 'word-wrap':'break-word', 'overflow-y':'auto', 'line-height': '1.5em'}); // remember to add unit (px or em) to line-height, as js in ie will take 1.5 as 1.5, not 1.5em
 });
 
 $("table tr:gt(0)").hover(

group/urls.py

@@ -2,7 +2,7 @@ from django.conf.urls.defaults import *
 
 from views import group_info, group_member_operations, \
     group_members, msg_reply, msg_reply_new, group_recommend, \
-    create_group_repo, group_joinrequest
+    create_group_repo, group_joinrequest, attention
 
 urlpatterns = patterns('',
     url(r'^(?P<group_id>[\d]+)/$', group_info, name='group_info'),
@@ -12,5 +12,6 @@ urlpatterns = patterns('',
     url(r'^(?P<group_id>[\d]+)/create-repo/$', create_group_repo, name='create_group_repo'),
     (r'^(?P<group_id>[\d]+)/member/(?P<user_name>[^/]+)/$', group_member_operations),
     url(r'^recommend/$', group_recommend, name='group_recommend'),
+    url(r'^attention/$', attention, name='group_attention'),
     url(r'^joinrequest/(?P<group_id>[\d]+)/$', group_joinrequest, name='group_joinrequest'),
 )

group/views.py

@@ -861,3 +861,37 @@ def group_joinrequest(request, group_id):
             return HttpResponseBadRequest(json.dumps(form.errors),
                                           content_type=content_type)
         
+def attention(request):
+    """
+    Handle ajax request to query group members used in autocomplete.
+    """
+    if not request.is_ajax():
+        raise Http404
+
+    try:
+        gid = int(request.GET.get('gid', ''))
+    except ValueError:
+        raise Http404
+
+    name_str =  request.GET.get('name_startsWith')
+    user = request.user.username
+
+    if not is_group_user(gid, user):
+        raise Http404
+
+    result = []
+    # Get all group users
+    members = get_group_members(gid)
+    for m in members:
+        if m.user_name == user:
+            continue
+        from base.templatetags.seahub_tags import email2nickname, char2pinyin
+        nickname = email2nickname(m.user_name)
+        pinyin = char2pinyin(nickname)
+        if nickname.startswith(name_str) or pinyin.startswith(name_str):
+            result.append({'contact_name': nickname})
+
+    content_type = 'application/json; charset=utf-8'
+    
+    return HttpResponse(json.dumps(result), content_type=content_type)
+    

media/js/utils.js

@@ -1,5 +1,3 @@
-/* -*- 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) {
@@ -83,7 +81,7 @@ function addAutocomplete(ele_id, container_id, data) {
  * @param ele_css: {'xx':'xxx'}, styles to be applied to ele_cp
  * @param container_id: id of autocomplete's container, often container of element above
  */
-function addAtAutocomplete(ele_id, container_id, data, ele_css) {
+function addAtAutocomplete(ele_id, container_id, gid, aj_url, ele_css) {
     var pos = ''; // cursor position
     var cursor_at_end; // Boolean. if cursor at the end or in the middle.
     var end_str = ''; // str after '@' when '@' is inserted into the middle of the ele's value
@@ -150,10 +148,22 @@ function addAtAutocomplete(ele_id, container_id, data, ele_css) {
                     } else {
                         request_term = request.term.slice(pos + 1, - end_str.length);
                     }
-                    var matcher = new RegExp($.ui.autocomplete.escapeRegex(request_term), "i");
+                    $.ajax({
-                    response($.grep(data, function(value) {
+                        url: aj_url,
-                        return matcher.test(value.value);
+                        dataType: "json",
+                        data: {
+                            gid: gid,
+                            name_startsWith: request_term
+                        },
+                        success: function(data) {
+                            response($.map(data, function(value) {
+                                return {
+                                    label: value.contact_name,
+                                    value: value.contact_name
+                                }
                             }));
+                        }
+                    });
                 } else {
                     response(null); // when cursor is at the left of current @ or @ is deleted
                 }