diff --git a/media/js/base.js b/media/js/base.js
index 7244320fa7..e838450653 100644
--- a/media/js/base.js
+++ b/media/js/base.js
@@ -812,3 +812,56 @@ function HTMLescape(html){
         .parentNode
         .innerHTML;
 }
+
+function userInputOPtionsForSelect2(user_search_url) {
+    return {
+        tags: [],
+
+        tokenSeparators: [",", " "],
+
+        minimumInputLength: 1, // input at least 1 character
+
+        ajax: {
+            url: user_search_url,
+            dataType: 'json',
+            delay: 250,
+            cache: true,
+            data: function (params) {
+                return {
+                    q: params
+                };
+            },
+            results: function (data) {
+                var user_list = [], users = data['users'];
+                for (var i = 0, len = users.length; i < len; i++) {
+                    user_list.push({ // 'id' & 'text' are required by the plugin
+                        "id": users[i].email,
+                        // for search. both name & email can be searched.
+                        // use ' '(space) to separate name & email
+                        "text": users[i].name + ' ' + users[i].email,
+                        "avatar": users[i].avatar,
+                        "name": users[i].name
+                    });
+                }
+                return {
+                    results: user_list
+                };
+            }
+        },
+
+        // format items shown in the drop-down menu
+        formatResult: function(item) {
+            if (item.avatar) {
+                return item.avatar + '<span class="text">' + HTMLescape(item.name) + '<br />' + HTMLescape(item.id) + '</span>';
+            } else {
+                return; // if no match, show nothing
+            }
+        },
+
+        // format selected item shown in the input
+        formatSelection: function(item) {
+            return HTMLescape(item.name || item.id); // if no name, show the email, i.e., when directly input, show the email
+        },
+        escapeMarkup: function(m) { return m; }
+    };
+}
diff --git a/seahub/group/templates/group/group_manage.html b/seahub/group/templates/group/group_manage.html
index f1c951f8e8..cf4b675b87 100644
--- a/seahub/group/templates/group/group_manage.html
+++ b/seahub/group/templates/group/group_manage.html
@@ -1,5 +1,10 @@
 {% extends 'group/group_base.html' %}
-{% load seahub_tags avatar_tags group_avatar_tags i18n %}
+{% load seahub_tags avatar_tags group_avatar_tags i18n staticfiles %}
+
+{% block extra_style %}
+<link rel="stylesheet" type="text/css" href="{% static "css/select2-3.5.2.css" %}" />
+<link rel="stylesheet" type="text/css" href="{% static "css/select2.custom.css" %}" />
+{% endblock %}
 
 {% block cur_admin %}tab-cur{% endblock %}
 
@@ -104,16 +109,28 @@
 
 <form id="group-rename-form" method="post" action="{% url 'group_rename' group.id %}" class="hide">{% csrf_token %}
     <h3>{% trans "Rename Group To"%}</h3>
-    <input type="text" name="new_name" value="" class="input" />
-    <br />
+    <input type="text" name="new_name" value="" class="input" /><br />
     <p class="error hide"></p>
     <input type="submit" value="{% trans "Submit"%}" />
 </form>
 
-{% include 'group/grpmember_add_form.html' %} {# for member/admin add #}
+<form id="group-member-add-form" method="post" action="{% url 'group_add_member' group.id %}" class="hide">
+    <h3>{% trans "Add members" %}</h3>
+    <input type="hidden" name="user_name" /><br />
+    <p class="error hide"></p>
+    <input type="submit" value="{% trans "Submit"%}" />
+</form>
+
+<form id="group-admin-add-form" method="post" action="{% url 'group_add_admin' group.id %}" class="hide">
+    <h3>{% trans "Add administrators" %}</h3>
+    <input type="hidden" name="user_name" /><br />
+    <p class="error hide"></p>
+    <input type="submit" value="{% trans "Submit"%}" />
+</form>
 {% endblock %}
 
 {% block extra_script %}{{block.super}}
+<script type="text/javascript" src="{% static "scripts/lib/select2-3.5.2.js" %}"></script>
 {% include "snippets/avatar_upload_js.html" %}
 <script type="text/javascript">
 var cur_tab = $('.ui-tabs-selected .a');    
@@ -146,14 +163,51 @@ addConfirmTo($(".rm-member"), {
         'title':"{% trans "Delete Member" %}",
         'con':"{% trans "Really want to delete %s ?" %}"
 });
-var contact_list = [], contact_email;
-{% for contact in contacts %}
-contact_email = '{{ contact.contact_email }}';
-contact_list.push({value:contact_email, label:contact_email});
-{% endfor %}
 
-{# for member/admin add #}
-{% include 'group/grpmember_add_js.html' %}
+$("#group-member-add, #group-admin-add").click(function() {
+    $('#' + $(this).attr('id') + '-form').modal({appendTo: "#main", focus:false});
+    $('#simplemodal-container').css({'width':'auto', 'height':'auto'});
+});
+
+$('[name="user_name"]', $('#group-member-add-form, #group-admin-add-form')).select2($.extend({
+    width: '268px',
+    placeholder: "{% trans "Search users" %}"
+}, userInputOPtionsForSelect2('{% url 'search-user' %}')));
+
+$('#group-member-add-form, #group-admin-add-form').submit(function() {
+    var form = $(this);
+    var user_name = $('[name="user_name"]', form).val();
+    if (!$.trim(user_name)) {
+        return false;
+    }
+
+    var submit_btn = $('[type="submit"]', form);
+    disable(submit_btn);
+    $.ajax({
+        url: form.attr('action'),
+        type: 'POST',
+        dataType: 'json',
+        cache: false,
+        beforeSend: prepareCSRFToken,
+        data: {
+            'user_name': user_name
+        },
+        success: function() {
+            location.reload(true);
+        },
+        error: function (xhr, textStatus, errorThrown) {
+            var error;
+            if (xhr.responseText) {
+                error = $.parseJSON(xhr.responseText).error;
+            } else {
+                error = "{% trans "Failed. Please check the network." %}";
+            }
+            $('.error', form).html(error).removeClass('hide');
+            enable(submit_btn);
+        }
+    });
+    return false;
+});
 
 $('#group-transfer').click(function() {
     $('#group-transfer-form').modal({appendTo: "#main", focus:false});
diff --git a/seahub/group/templates/group/grpmember_add_form.html b/seahub/group/templates/group/grpmember_add_form.html
deleted file mode 100644
index c78908339a..0000000000
--- a/seahub/group/templates/group/grpmember_add_form.html
+++ /dev/null
@@ -1,34 +0,0 @@
-{% load i18n avatar_tags %}
-<form id="member-add-form"  method="post" name="member-add-form" class="tab-popup hide">{% csrf_token %}
-    <h3 class="hd">{% trans "Add members"%}</h3>
-    <div id="member-add-tabs" class="tab-popup-tabs">
-        <ul class="tab-popup-tabs-nav">
-            <li class="tab"><a href="#enter" class="a">{% trans 'Enter' %}</a></li>
-            <li class="tab"><a href="#contact-options" class="a">{% trans 'Contacts' %}</a></li>
-        </ul>
-        <div id="enter">
-            <textarea id="added-member-name" name="user_name" placeholder="{% trans "emails, separated by ','" %}"></textarea><br />
-            {% if cloud_mode and not org %}
-            <p class="tip">{% trans "Tip: an invitation will be sent if the email is not registered."%}</p>
-            {% else %}
-            <p class="tip">{% trans "Tip: the emails should be already registered."%}</p>
-            {% endif %}
-        </div>
-        <div id="contact-options" class="hide">
-            <ul class="option-list">
-            {% for contact in contacts %}
-            <li>
-            <label class="checkbox-label">
-                <span class="checkbox"><input type="checkbox" name="contact" value="{{ contact.contact_email }}" class="checkbox-orig" /></span>
-                {% avatar contact.contact_email 20 %} <span class="checkbox-option">{{ contact.contact_email }}</span>
-            </label>
-            </li>
-            {% endfor %}
-        </ul>
-        </div>
-    </div>
-    <div class="bot">
-        <p class="error hide"></p>
-        <input type="submit" value="{% trans "Submit"%}" />
-    </div>
-</form>
diff --git a/seahub/group/templates/group/grpmember_add_js.html b/seahub/group/templates/group/grpmember_add_js.html
deleted file mode 100644
index 5a3fa78931..0000000000
--- a/seahub/group/templates/group/grpmember_add_js.html
+++ /dev/null
@@ -1,61 +0,0 @@
-{% load i18n %}
-$("#group-member-add, #group-admin-add").click(function() {
-    var form = $("#member-add-form");
-    form.modal({appendTo: "#main", focus:false});
-    $('#simplemodal-container').css({'height':'auto', 'padding':0});
-    $('#member-add-tabs').tabs();
-    if ($(this).attr('id') == 'group-admin-add') {
-        $('.hd', form).html("{% trans "Add administrators"%}");
-        $('#enter .tip').addClass('hide');
-        form.data('post_url', '{% url 'group_add_admin' group.id %}');
-    } else {
-        form.data('post_url', '{% url 'group_add_member' group.id %}');
-    }
-    addAutocomplete('#added-member-name', '#enter', contact_list);
-});
-
-$('#member-add-form').submit(function() {
-    var form = $(this),
-        cur_tab_id = $('.ui-tabs-selected a', form).attr('href'),
-        post_data = '',
-        input = $('[name="user_name"]', form); 
-        switch(cur_tab_id) {
-            case '#enter':
-                post_data = input.val();
-                break;
-            case '#contact-options':
-                $(cur_tab_id + ' .checkbox-checked .checkbox-orig').each(function() {
-                    post_data += $(this).val() + ','; 
-                });  
-                input.val(post_data);
-        }    
-        if (!post_data) {
-            apply_form_error(form.attr('id'), "{% trans "Please enter emails, or select some." %}");
-            return false;
-        }    
-
-    var submit_btn = $('[type="submit"]', form);
-    disable(submit_btn);
-    $.ajax({
-        url: form.data('post_url'),
-        type: 'POST',
-        dataType: 'json',
-        cache: false,
-        beforeSend: prepareCSRFToken,
-        data: {
-            'user_name': post_data
-        },
-        success: function(data) {
-            location.reload(true);
-        },
-        error: function(data, textStatus, jqXHR) {
-            var errors = $.parseJSON(data.responseText);
-            $.each(errors, function(index, value) {
-                apply_form_error(form.attr('id'), value);
-            });
-            enable(submit_btn);
-        }
-    });
-
-    return false;
-});
diff --git a/seahub/group/views.py b/seahub/group/views.py
index 50ab424f81..5d0f949b59 100644
--- a/seahub/group/views.py
+++ b/seahub/group/views.py
@@ -765,8 +765,6 @@ def group_manage(request, group_id):
     members_all = ccnet_threaded_rpc.get_group_members(group.id)
     admins = [m for m in members_all if m.is_staff]
 
-    contacts = Contact.objects.get_contacts_by_user(request.user.username)
-
     if PublicGroup.objects.filter(group_id=group.id):
         group.is_pub = True
     else:
@@ -787,7 +785,6 @@ def group_manage(request, group_id):
             'group': group,
             'members': members_all,
             'admins': admins,
-            'contacts': contacts,
             'is_staff': True,
             "mods_enabled": mods_enabled,
             "mods_available": mods_available,
@@ -857,8 +854,8 @@ def group_add_admin(request, group_id):
                 return HttpResponse(json.dumps(result), status=500,
                                     content_type=content_type)
     messages.success(request, _(u'Operation succeeded.'))
-    return HttpResponse(json.dumps('success'), status=200,
-                        content_type=content_type)
+    result['success'] = True
+    return HttpResponse(json.dumps(result), status=200, content_type=content_type)
 
 @login_required
 @group_staff_required
diff --git a/seahub/templates/repo_folder_perm.html b/seahub/templates/repo_folder_perm.html
index ac019255d3..e9eb32c9f1 100644
--- a/seahub/templates/repo_folder_perm.html
+++ b/seahub/templates/repo_folder_perm.html
@@ -5,23 +5,8 @@
 {% block sub_title %}{{repo.name}} - {% endblock %}
 
 {% block extra_style %}
-<link rel="stylesheet" type="text/css" href="{% static "css/select2-3.5.2.css" %}"/>
-<style type="text/css">
-/* custom select2 */
-.select2-container-multi .select2-choices {
-    border-color: #ddd;
-    border-radius: 2px;
-    background-image: none; /* rm the shadow */
-}
-.select2-container-multi .select2-choices .select2-search-field input {
-    padding:2px 2px 2px 5px;
-}
-.select2-container-multi .select2-choices .select2-search-choice {
-    border:none;
-    border-radius:0;
-    background:#eee;
-}
-</style>
+<link rel="stylesheet" type="text/css" href="{% static "css/select2-3.5.2.css" %}" />
+<link rel="stylesheet" type="text/css" href="{% static "css/select2.custom.css" %}" />
 {% endblock %}
 
 {% block left_panel %}
@@ -198,61 +183,10 @@ group_id = '{{ group.id }}';
 group_list.push({value:group_id, label:group_name});
 {% endfor %}
 
-user_input.select2({
+user_input.select2($.extend({
     width: '203px',
-    placeholder: "{% trans "Search user" %}",
-
-    tags: [],
-
-    tokenSeparators: [",", " "],
-
-    minimumInputLength: 1, // input at least 1 character
-
-    ajax: {
-        url: '{% url 'search-user' %}',
-        dataType: 'json',
-        delay: 250,
-        cache: true,
-        data: function (params) {
-            return {
-                q: params
-            };
-        },
-        results: function (data) {
-            var user_list = [], users = data['users'];
-
-            for (var i = 0, len = users.length; i < len; i++) {
-                user_list.push({ // 'id' & 'text' are required by the plugin
-                    "id": users[i].email,
-                    // for search. both name & email can be searched.
-                    // use ' '(space) to separate name & email
-                    "text": users[i].name + ' ' + users[i].email,
-                    "avatar": users[i].avatar,
-                    "name": users[i].name
-                });
-            }
-
-            return {
-                results: user_list
-            };
-        }
-    },
-
-    // format items shown in the drop-down menu
-    formatResult: function(item) {
-        if (item.avatar) {
-            return item.avatar + '<span class="text">' + HTMLescape(item.name) + '<br />' + HTMLescape(item.id) + '</span>';
-        } else {
-            return; // if no match, show nothing
-        }
-    },
-
-    // format selected item shown in the input
-    formatSelection: function(item) {
-        return HTMLescape(item.name || item.id); // if no name, show the email, i.e., when directly input, show the email
-    },
-    escapeMarkup: function(m) { return m; }
-});
+    placeholder: "{% trans "Search user" %}"
+}, userInputOPtionsForSelect2('{% url 'search-user' %}')));
 
 group_input.bind('autocompleteopen', function(e, ui) {
                var widget = group_input.autocomplete('widget');