Add text input to act as live filter. updates #212

converse.js

@@ -3240,7 +3240,8 @@
             initialize: function () {
                 this.model.contacts.on("add", this.addContact, this);
                 this.model.contacts.on("change:chat_status", function (contact) {
-                    // This might be optimized by instead of first sorting, finding the correct position in positionContact
+                    // This might be optimized by instead of first sorting,
+                    // finding the correct position in positionContact
                     this.model.contacts.sort();
                     this.positionContact(contact).render();
                 }, this);
@@ -3293,7 +3294,7 @@
             addContact: function (contact) {
                 var view = new converse.RosterContactView({model: contact});
                 this.add(contact.get('id'), view);
-                var view = this.positionContact(contact).render();
+                view = this.positionContact(contact).render();
                 if (this.model.get('state') === CLOSED) {
                     view.$el.hide();
                 }
@@ -3347,7 +3348,7 @@
         });
 
         this.RosterView = Backbone.Overview.extend({
-            tagName: 'dl',
+            tagName: 'div',
             id: 'converse-roster',
 
             initialize: function () {
@@ -3369,7 +3370,10 @@
             },
 
             render: function () {
-                this.$el.empty();
+                this.$el.html(converse.templates.roster({
+                    placeholder: __('Type to filter contacts')
+                }));
+                this.$('.roster-filter').liveFilter('.roster-contacts', {hide: 'dt'});
                 return this;
             },
 
@@ -3457,13 +3461,13 @@
                     */
                 model.sort();
                 model.each($.proxy(function (group, idx) {
-                    var view = this.get(group.get('name'))
+                    var view = this.get(group.get('name'));
                     if (!view) {
                         view = new converse.RosterGroupView({model: group});
                         this.add(group.get('name'), view.render());
                     }
                     if (idx === 0) {
-                        this.$el.append(view.$el);
+                        this.$('.roster-contacts').append(view.$el);
                     } else {
                         this.appendGroup(view);
                     }
@@ -3476,7 +3480,7 @@
                  */
                 var index = this.model.indexOf(view.model);
                 if (index === 0) {
-                    this.$el.prepend(view.$el);
+                    this.$('.roster-contacts').prepend(view.$el);
                 } else if (index == (this.model.length-1)) {
                     this.appendGroup(view);
                 } else {

css/converse.css

@@ -872,11 +872,11 @@ dl.add-converse-contact {
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-#conversejs #converse-roster span.req-contact-name {
+#converse-roster span.req-contact-name {
   width: 65%;
 }
-#conversejs #converse-roster span.pending-contact-name,
-#conversejs #converse-roster a.open-chat {
+#converse-roster span.pending-contact-name,
+#converse-roster a.open-chat {
   width: 80%;
 }
 #converse-roster dd span {
@@ -952,7 +952,7 @@ dl.add-converse-contact {
   font-size: 15px;
 }
 #conversejs dd.available-chatroom,
-#conversejs #converse-roster dd {
+#converse-roster dd {
   font-weight: bold;
   border: none;
   display: block;
@@ -961,7 +961,7 @@ dl.add-converse-contact {
   text-shadow: 0 1px 0 #fafafa;
   clear: both;
 }
-#conversejs #converse-roster dd {
+#converse-roster dd {
   line-height: 16px;
 }
 #conversejs .group-toggle {
@@ -970,20 +970,20 @@ dl.add-converse-contact {
 }
 #conversejs .roster-group:hover,
 #conversejs dd.available-chatroom:hover,
-#conversejs #converse-roster dd:hover {
+#converse-roster dd:hover {
   background-color: #eee;
 }
-#conversejs #converse-roster dd a.decline-xmpp-request {
+#converse-roster dd a.decline-xmpp-request {
   margin-left: 5px;
 }
-#conversejs #converse-roster dd a.remove-xmpp-contact {
+#converse-roster dd a.remove-xmpp-contact {
   float: right;
   width: 22px;
   margin: 0;
   display: none;
   color: #4f4f4f;
 }
-#conversejs #converse-roster dd:hover a.remove-xmpp-contact {
+#converse-roster dd:hover a.remove-xmpp-contact {
   display: inline-block;
 }
 #conversejs .chatbox,

docs/CHANGES.rst

@@ -1,8 +1,14 @@
 Changelog
 =========
 
-0.8 (2014-08-04)
-----------------
+0.8.1 (Unreleased)
+------------------
+
+* #212 Provide a live filter of the roster contacts. [jcbrand]
+
+
+0.8.0 (2014-08-04)
+------------------
 
 .. note::
     1. Converse.js is now relicensed under the `Mozilla Public License <http://www.mozilla.org/MPL/2.0/>`_.

less/converse.less

@@ -967,12 +967,12 @@ dl.add-converse-contact {
     text-overflow: ellipsis;
 }
 
-#conversejs #converse-roster span.req-contact-name {
+#converse-roster span.req-contact-name {
     width: 65%;
 }
 
-#conversejs #converse-roster span.pending-contact-name,
-#conversejs #converse-roster a.open-chat {
+#converse-roster span.pending-contact-name,
+#converse-roster a.open-chat {
     width: 80%;
 }
 
@@ -1063,7 +1063,7 @@ dl.add-converse-contact {
 }
 
 #conversejs dd.available-chatroom,
-#conversejs #converse-roster dd {
+#converse-roster dd {
     font-weight: bold;
     border: none;
     display: block;
@@ -1073,7 +1073,7 @@ dl.add-converse-contact {
     clear: both;
 }
 
-#conversejs #converse-roster dd {
+#converse-roster dd {
     line-height: 16px;
 }
 
@@ -1084,15 +1084,15 @@ dl.add-converse-contact {
 
 #conversejs .roster-group:hover,
 #conversejs dd.available-chatroom:hover,
-#conversejs #converse-roster dd:hover {
+#converse-roster dd:hover {
     background-color: #eee;
 }
 
-#conversejs #converse-roster dd a.decline-xmpp-request {
+#converse-roster dd a.decline-xmpp-request {
     margin-left: 5px;
 }
 
-#conversejs #converse-roster dd a.remove-xmpp-contact {
+#converse-roster dd a.remove-xmpp-contact {
     float: right;
     width: 22px;
     margin: 0;
@@ -1100,7 +1100,7 @@ dl.add-converse-contact {
     color: rgb(79, 79, 79);
 }
 
-#conversejs #converse-roster  dd:hover a.remove-xmpp-contact {
+#converse-roster  dd:hover a.remove-xmpp-contact {
     display: inline-block;
 }
 

main.js

@@ -4,6 +4,7 @@ config = {
         "jquery": "components/jquery/dist/jquery",
         "jquery.browser": "components/jquery.browser/dist/jquery.browser",
         "jquery.easing": "components/jquery-easing-original/jquery.easing.1.3", // XXX: Only required for https://conversejs.org website
+        "jquery.fastLiveFilter": "src/jquery.fastLiveFilter",
         "bootstrap": "components/bootstrap/dist/js/bootstrap",                  // XXX: Only required for https://conversejs.org website
         "locales": "locale/locales",
         "underscore": "components/underscore/underscore",
@@ -74,6 +75,7 @@ config = {
         'bigint':               { deps: ['crypto'] },
         'jquery.browser':       { deps: ['jquery'] },
         'jquery.easing':        { deps: ['jquery'] },
+        'jquery.fastLiveFilter':{ deps: ['jquery'] },
         'strophe':              { deps: ['jquery'] },
         'strophe.disco':        { deps: ['strophe'] },
         'strophe.muc':          { deps: ['strophe', 'jquery'] },

mockup/controlbox.html

@@ -114,139 +114,142 @@
                         </ul>
                     </dd>
                 </dl>
-                <dl id="converse-roster" style="display: block;">
-                    <dt class="roster-group" style="display: block;">
-                        <a href="#" data-group="Colleagues" class="group-toggle icon-opened" title="Click to hide these contacts">Colleagues</a>
-                    </dt>
-                    <dd class="online current-xmpp-contact">
-                        <a class="open-chat" title="Click to chat with this contact" href="#">
-                            <span class="icon-online" title="This contact is online"></span>
-                            Victor Matfield
-                        </a>
-                        <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
-                    </dd>
-                    <dd class="away current-xmpp-contact">
-                        <a class="open-chat" title="Click to chat with this contact" href="#">
-                            <span class="icon-away" title="this contact is away"></span>
-                            William Winterbottom
-                        </a>
-                        <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
-                    </dd>
-                    <dd class="dnd current-xmpp-contact">
-                        <a class="open-chat" title="Click to chat with this contact" href="#">
-                            <span class="icon-dnd" title="This contact is busy"></span>
-                            Gary Teichmann
-                        </a>
-                        <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
-                    </dd>
+                <div id="converse-roster">
+                    <input id="search_input" placeholder="Type to filter">
+                    <dl class="roster-contacts" style="display: block;">
+                        <dt class="roster-group" style="display: block;">
+                            <a href="#" data-group="Colleagues" class="group-toggle icon-opened" title="Click to hide these contacts">Colleagues</a>
+                        </dt>
+                        <dd class="online current-xmpp-contact">
+                            <a class="open-chat" title="Click to chat with this contact" href="#">
+                                <span class="icon-online" title="This contact is online"></span>
+                                Victor Matfield
+                            </a>
+                            <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
+                        </dd>
+                        <dd class="away current-xmpp-contact">
+                            <a class="open-chat" title="Click to chat with this contact" href="#">
+                                <span class="icon-away" title="this contact is away"></span>
+                                William Winterbottom
+                            </a>
+                            <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
+                        </dd>
+                        <dd class="dnd current-xmpp-contact">
+                            <a class="open-chat" title="Click to chat with this contact" href="#">
+                                <span class="icon-dnd" title="This contact is busy"></span>
+                                Gary Teichmann
+                            </a>
+                            <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
+                        </dd>
 
-                    <dt class="roster-group" style="display: block;">
-                        <a href="#" data-group="Family" class="group-toggle icon-opened" title="Click to hide these contacts">Family</a>
-                    </dt>
-                    <dd class="away current-xmpp-contact">
-                        <a class="open-chat" title="Click to chat with this contact" href="#">
-                            <span class="icon-away" title="this contact is away"></span>
-                            Allan Donald 
-                        </a>
-                        <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
-                    </dd>
-                    <dd class="offline current-xmpp-contact">
-                        <a class="open-chat" title="Click to chat with this contact" href="#">
-                            <span class="icon-offline" title="This contact is offline"></span>
-                            Corné Krige
-                        </a>
-                        <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
-                    </dd>
+                        <dt class="roster-group" style="display: block;">
+                            <a href="#" data-group="Family" class="group-toggle icon-opened" title="Click to hide these contacts">Family</a>
+                        </dt>
+                        <dd class="away current-xmpp-contact">
+                            <a class="open-chat" title="Click to chat with this contact" href="#">
+                                <span class="icon-away" title="this contact is away"></span>
+                                Allan Donald 
+                            </a>
+                            <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
+                        </dd>
+                        <dd class="offline current-xmpp-contact">
+                            <a class="open-chat" title="Click to chat with this contact" href="#">
+                                <span class="icon-offline" title="This contact is offline"></span>
+                                Corné Krige
+                            </a>
+                            <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
+                        </dd>
 
-                    <dt class="roster-group" style="display: block;">
-                        <a href="#" data-group="Friends" class="group-toggle icon-opened" title="Click to hide these contacts">Friends</a>
-                    </dt>
-                    <dd class="online current-xmpp-contact">
-                        <a class="open-chat" title="Click to chat with this contact" href="#">
-                            <span class="icon-online" title="This contact is online"></span>
-                            John Smit
-                        </a>
-                        <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
-                    </dd>
-                    <dd class="online current-xmpp-contact">
-                        <a class="open-chat" title="Click to chat with this contact" href="#">
-                            <span class="icon-online" title="This contact is online"></span>
-                            Bakkies Botha
-                        </a>
-                        <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
-                    </dd>
+                        <dt class="roster-group" style="display: block;">
+                            <a href="#" data-group="Friends" class="group-toggle icon-opened" title="Click to hide these contacts">Friends</a>
+                        </dt>
+                        <dd class="online current-xmpp-contact">
+                            <a class="open-chat" title="Click to chat with this contact" href="#">
+                                <span class="icon-online" title="This contact is online"></span>
+                                John Smit
+                            </a>
+                            <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
+                        </dd>
+                        <dd class="online current-xmpp-contact">
+                            <a class="open-chat" title="Click to chat with this contact" href="#">
+                                <span class="icon-online" title="This contact is online"></span>
+                                Bakkies Botha
+                            </a>
+                            <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
+                        </dd>
 
-                    <dt class="roster-group" style="display: block;">
-                        <a href="#" class="group-toggle icon-opened" title="Click to hide these contacts">Ungrouped</a>
-                    </dt>
-                    <dd class="online current-xmpp-contact">
-                        <a class="open-chat" title="Click to chat with this contact" href="#">
-                            <span class="icon-online" title="This contact is online"></span>
-                            James Small 
-                        </a>
-                        <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
-                    </dd>
+                        <dt class="roster-group" style="display: block;">
+                            <a href="#" class="group-toggle icon-opened" title="Click to hide these contacts">Ungrouped</a>
+                        </dt>
+                        <dd class="online current-xmpp-contact">
+                            <a class="open-chat" title="Click to chat with this contact" href="#">
+                                <span class="icon-online" title="This contact is online"></span>
+                                James Small 
+                            </a>
+                            <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
+                        </dd>
 
-                    <dt id="xmpp-contact-requests" style="display: block;">
-                        <a href="#" class="group-toggle icon-opened" title="Click to hide these contacts">Contact Requests</a>
-                    </dt>
-                    <dd class="offline requesting-xmpp-contact">
-                        <span class="req-contact-name">Bob Skinstad</span>
-                        <span class="request-actions">
-                            <a class="accept-xmpp-request icon-checkmark" title="Click here to accept this contact's request" href="#"></a>
-                            <a class="decline-xmpp-request icon-close" title="Click here to decline this contact's request" href="#"></a>
-                        </span>
-                    </dd>
-                    <dd class="offline requesting-xmpp-contact">
-                        <span class="req-contact-name">André Vos</span>
-                        <span class="request-actions">
-                            <a class="accept-xmpp-request icon-checkmark" title="Click here to accept this contact's request" href="#"></a>
-                            <a class="decline-xmpp-request icon-close" title="Click here to decline this contact's request" href="#"></a>
-                        </span>
-                    </dd>
+                        <dt id="xmpp-contact-requests" style="display: block;">
+                            <a href="#" class="group-toggle icon-opened" title="Click to hide these contacts">Contact Requests</a>
+                        </dt>
+                        <dd class="offline requesting-xmpp-contact">
+                            <span class="req-contact-name">Bob Skinstad</span>
+                            <span class="request-actions">
+                                <a class="accept-xmpp-request icon-checkmark" title="Click here to accept this contact's request" href="#"></a>
+                                <a class="decline-xmpp-request icon-close" title="Click here to decline this contact's request" href="#"></a>
+                            </span>
+                        </dd>
+                        <dd class="offline requesting-xmpp-contact">
+                            <span class="req-contact-name">André Vos</span>
+                            <span class="request-actions">
+                                <a class="accept-xmpp-request icon-checkmark" title="Click here to accept this contact's request" href="#"></a>
+                                <a class="decline-xmpp-request icon-close" title="Click here to decline this contact's request" href="#"></a>
+                            </span>
+                        </dd>
 
-                    <dt id="pending-xmpp-contacts" style="display: block;">
-                        <a href="#" class="group-toggle icon-opened" title="Click to hide these contacts">Pending Contacts</a>
-                    </dt>
-                    <dd class="offline pending-xmpp-contact"><span class="pending-contact-name">Rassie Erasmus</span>
-                        <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
-                    </dd>
-                    <dd class="offline pending-xmpp-contact"><span class="pending-contact-name">Victor Matfield</span>
-                        <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
-                    </dd>
-                </dl>
-            </div>
-            <div id="chatrooms" style="display: none;">
-                <form class="add-chatroom" action="" method="post">
-                    <input type="text" name="chatroom" class="new-chatroom-name" placeholder="Room name">
-                    <input type="text" name="nick" class="new-chatroom-nick" placeholder="Nickname">
-                    <input type="text" name="server" class="new-chatroom-server" placeholder="Server">
-                    <input type="submit" name="join" value="Join">
-                    <input type="button" name="show" id="show-rooms" value="Show rooms" style="display: inline-block;">
-                </form>
-                <dl id="available-chatrooms">
-                    <dt>Rooms on conference.opkode.im</dt>
-                    <dd class="available-chatroom">
-                        <a class="open-room" 
-                            data-room-jid="converse.js@conference.opkode.im"
-                            title="Click to open this room" href="#">Special chatroom with a long name (2)</a>
-                        <a class="room-info icon-room-info" 
-                            data-room-jid="converse.js@conference.opkode.im" 
-                            title="Show more information on this room" href="#">&nbsp;</a>
-                        <div class="room-info">
-                            <p class="room-info"><strong>Description:</strong></p>
-                            <p class="room-info"><strong>Occupants:</strong> 2</p>
-                            <p class="room-info"><strong>Features:</strong> </p>
-                            <ul>
-                                <li class="room-info">Moderated</li><li class="room-info">Open room</li>
-                                <li class="room-info">Permanent room</li><li class="room-info">Public</li>
-                                <li class="room-info">Semi-anonymous</li>
-                                <li class="room-info">Requires authentication <span class="icon-lock"></span></li>
-                                <p></p>
-                            </ul>
-                        </div>
-                    </dd>
-                </dl>
+                        <dt id="pending-xmpp-contacts" style="display: block;">
+                            <a href="#" class="group-toggle icon-opened" title="Click to hide these contacts">Pending Contacts</a>
+                        </dt>
+                        <dd class="offline pending-xmpp-contact"><span class="pending-contact-name">Rassie Erasmus</span>
+                            <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
+                        </dd>
+                        <dd class="offline pending-xmpp-contact"><span class="pending-contact-name">Victor Matfield</span>
+                            <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
+                        </dd>
+                    </dl>
+                </div>
+                <div id="chatrooms" style="display: none;">
+                    <form class="add-chatroom" action="" method="post">
+                        <input type="text" name="chatroom" class="new-chatroom-name" placeholder="Room name">
+                        <input type="text" name="nick" class="new-chatroom-nick" placeholder="Nickname">
+                        <input type="text" name="server" class="new-chatroom-server" placeholder="Server">
+                        <input type="submit" name="join" value="Join">
+                        <input type="button" name="show" id="show-rooms" value="Show rooms" style="display: inline-block;">
+                    </form>
+                    <dl id="available-chatrooms">
+                        <dt>Rooms on conference.opkode.im</dt>
+                        <dd class="available-chatroom">
+                            <a class="open-room" 
+                                data-room-jid="converse.js@conference.opkode.im"
+                                title="Click to open this room" href="#">Special chatroom with a long name (2)</a>
+                            <a class="room-info icon-room-info" 
+                                data-room-jid="converse.js@conference.opkode.im" 
+                                title="Show more information on this room" href="#">&nbsp;</a>
+                            <div class="room-info">
+                                <p class="room-info"><strong>Description:</strong></p>
+                                <p class="room-info"><strong>Occupants:</strong> 2</p>
+                                <p class="room-info"><strong>Features:</strong> </p>
+                                <ul>
+                                    <li class="room-info">Moderated</li><li class="room-info">Open room</li>
+                                    <li class="room-info">Permanent room</li><li class="room-info">Public</li>
+                                    <li class="room-info">Semi-anonymous</li>
+                                    <li class="room-info">Requires authentication <span class="icon-lock"></span></li>
+                                    <p></p>
+                                </ul>
+                            </div>
+                        </dd>
+                    </dl>
+                </div>
             </div>
         </div>
     </div>

src/build-no-locales-no-otr.js

@@ -25,6 +25,7 @@
         "strophe.disco": "components/strophe.disco/index",
         "converse-dependencies": "src/deps-no-otr",
         "jquery.browser": "components/jquery.browser/dist/jquery.browser",
+        "jquery.fastLiveFilter": "src/jquery.fastLiveFilter",
         "moment":"components/momentjs/moment",
         "converse-templates":"src/templates",
         "tpl": "components/requirejs-tpl-jcbrand/tpl",

src/build-no-otr.js

@@ -29,6 +29,7 @@
         "ru": "locale/ru/LC_MESSAGES/ru",
         "zh": "locale/zh/LC_MESSAGES/zh",
         "jquery.browser": "components/jquery.browser/dist/jquery.browser",
+        "jquery.fastLiveFilter": "src/jquery.fastLiveFilter",
         "underscore": "components/underscore/underscore",
         "backbone": "components/backbone/backbone",
         "backbone.browserStorage": "components/backbone.browserStorage/backbone.browserStorage",

src/build-website-no-otr.js

@@ -29,6 +29,7 @@
         "ru": "locale/ru/LC_MESSAGES/ru",
         "zh": "locale/zh/LC_MESSAGES/zh",
         "jquery.browser": "components/jquery.browser/dist/jquery.browser",
+        "jquery.fastLiveFilter": "src/jquery.fastLiveFilter",
         "underscore": "components/underscore/underscore",
         "backbone": "components/backbone/backbone",
         "backbone.browserStorage": "components/backbone.browserStorage/backbone.browserStorage",

src/build-website.js

@@ -35,6 +35,7 @@
         "backbone.overview": "components/backbone.overview/backbone.overview",
         "bootstrap": "components/bootstrap/dist/js/bootstrap",                  // XXX: Only required for https://conversejs.org website
         "jquery.easing": "components/jquery-easing-original/jquery.easing.1.3", // XXX: Only required for https://conversejs.org website
+        "jquery.fastLiveFilter": "src/jquery.fastLiveFilter",
         "strophe": "components/strophe/strophe",
         "strophe.muc": "components/strophe.muc/index",
         "strophe.roster": "components/strophe.roster/index",

src/build.js

@@ -29,6 +29,7 @@
         "ru": "locale/ru/LC_MESSAGES/ru",
         "zh": "locale/zh/LC_MESSAGES/zh",
         "jquery.browser": "components/jquery.browser/dist/jquery.browser",
+        "jquery.fastLiveFilter": "src/jquery.fastLiveFilter",
         "underscore": "components/underscore/underscore",
         "backbone": "components/backbone/backbone",
         "backbone.browserStorage": "components/backbone.browserStorage/backbone.browserStorage",

src/deps-full.js

@@ -5,6 +5,7 @@ define("converse-dependencies", [
     "backbone.browserStorage",
     "backbone.overview",
     "jquery.browser",
+    "jquery.fastLiveFilter",
     "strophe",
     "strophe.muc",
     "strophe.roster",

src/deps-no-otr.js

@@ -4,6 +4,7 @@ define("converse-dependencies", [
     "backbone.browserStorage",
     "backbone.overview",
     "jquery.browser",
+    "jquery.fastLiveFilter",
     "strophe",
     "strophe.muc",
     "strophe.roster",

src/deps-website-no-otr.js

@@ -6,6 +6,7 @@ define("converse-dependencies", [
     "backbone.overview",
     "jquery.browser",
     "jquery.easing", // XXX: Can be removed, only for https://conversejs.org
+    "jquery.fastLiveFilter",
     "strophe",
     "strophe.muc",
     "strophe.roster",

src/deps-website.js

@@ -2,11 +2,12 @@ define("converse-dependencies", [
     "otr",
     "moment",
     "locales",
-    "bootstrap", // XXX: Can be removed, only for https://conversejs.org
+    "bootstrap", // XXX: Only for https://conversejs.org
     "backbone.browserStorage",
     "backbone.overview",
     "jquery.browser",
-    "jquery.easing", // XXX: Can be removed, only for https://conversejs.org
+    "jquery.easing", // XXX: Only for https://conversejs.org
+    "jquery.fastLiveFilter",
     "strophe",
     "strophe.muc",
     "strophe.roster",

src/jquery.fastLiveFilter.js

@@ -0,0 +1,59 @@
+/**
+ * fastLiveFilter jQuery plugin 1.0.3
+ * 
+ * Copyright (c) 2011, Anthony Bush
+ * License: <http://www.opensource.org/licenses/bsd-license.php>
+ * Project Website: http://anthonybush.com/projects/jquery_fast_live_filter/
+ **/
+
+jQuery.fn.liveFilter = function(list, options) {
+	// Options: input, list, timeout, callback
+	options = options || {};
+	var input = this;
+	var lastFilter = '';
+	var timeout = options.timeout || 0;
+	var callback = options.callback || function() {};
+	var keyTimeout;
+	callback(); // do a one-time callback on initialization to make sure everything's in sync
+	
+	input.change(function() {
+        var $list = jQuery(list);
+        var lis = $list.children();
+        var len = lis.length;
+		var filter = input.val().toLowerCase();
+        if (filter.length > 0) {
+            $list.find(options.hide).hide();
+        } else {
+            $list.find(options.hide).show();
+        }
+		var li, innerText;
+		var numShown = 0;
+		for (var i = 0; i < len; i++) {
+			li = lis[i];
+			innerText = !options.selector ? 
+				(li.textContent || li.innerText || "") : 
+				$(li).find(options.selector).text();
+			
+			if (innerText.toLowerCase().indexOf(filter) >= 0) {
+				if (li.style.display == "none") {
+                    $(li).show();
+				}
+				numShown++;
+			} else {
+				if (li.style.display != "none") {
+                    $(li).hide();
+				}
+			}
+		}
+		callback(numShown);
+		return false;
+	}).keydown(function() {
+		clearTimeout(keyTimeout);
+		keyTimeout = setTimeout(function() {
+			if( input.val() === lastFilter ) return;
+			lastFilter = input.val();
+			input.change();
+		}, timeout);
+	});
+	return this; // maintain jQuery chainability
+};

src/templates.js

@@ -32,6 +32,7 @@ define("converse-templates", [
     "tpl!src/templates/room_description",
     "tpl!src/templates/room_item",
     "tpl!src/templates/room_panel",
+    "tpl!src/templates/roster",
     "tpl!src/templates/roster_item",
     "tpl!src/templates/select_option",
     "tpl!src/templates/status_option",
@@ -73,11 +74,12 @@ define("converse-templates", [
         room_description:       arguments[30],
         room_item:              arguments[31],
         room_panel:             arguments[32],
-        roster_item:            arguments[33],
-        select_option:          arguments[34],
-        status_option:          arguments[35],
-        toggle_chats:           arguments[36],
-        toolbar:                arguments[37],
-        trimmed_chat:           arguments[38]
+        roster:                 arguments[33],
+        roster_item:            arguments[34],
+        select_option:          arguments[35],
+        status_option:          arguments[36],
+        toggle_chats:           arguments[37],
+        toolbar:                arguments[38],
+        trimmed_chat:           arguments[39]
     };
 });

src/templates/roster.html

@@ -0,0 +1,2 @@
+<input class="roster-filter" placeholder="{{placeholder}}">
+<dl class="roster-contacts" style="display: block;">