From 7bcceacf69eacf9bc65954a4af5d4666196a96d6 Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Sat, 24 Jan 2015 23:55:50 -1000
Subject: [PATCH] Implement typeahead (first pass)

---
 js/views/conversation_list_view.js |  1 -
 js/views/inbox_view.js             | 39 +++++++++++++++++++++++++++---
 2 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/js/views/conversation_list_view.js b/js/views/conversation_list_view.js
index 60ad4fd6..5fb39698 100644
--- a/js/views/conversation_list_view.js
+++ b/js/views/conversation_list_view.js
@@ -20,7 +20,6 @@ var Whisper = Whisper || {};
 
   Whisper.ConversationListView = Whisper.ListView.extend({
     tagName: 'div',
-    id: 'contacts',
     itemView: Whisper.ConversationListItemView,
 
     events: {
diff --git a/js/views/inbox_view.js b/js/views/inbox_view.js
index 00f4c309..9582707b 100644
--- a/js/views/inbox_view.js
+++ b/js/views/inbox_view.js
@@ -18,14 +18,31 @@
 
     window.Whisper = window.Whisper || {};
 
+    var typeahead = Backbone.TypeaheadCollection.extend({
+        typeaheadAttributes: ['name'],
+        database: Whisper.Database,
+        storeName: 'conversations',
+        model: Whisper.Conversation,
+
+        comparator: function(m) {
+            return m.get('name');
+        },
+    });
+
     Whisper.InboxView = Backbone.View.extend({
         initialize: function () {
             this.gutter = $('#gutter');
             this.contacts = $('#contacts');
 
-            this.conversations = new Whisper.ConversationCollection();
+            this.typeahead_collection = new typeahead();
+            this.typeahead_view = new Whisper.ConversationListView({
+                collection : new Whisper.ConversationCollection()
+            });
+            this.typeahead_view.$el.hide().insertAfter(this.contacts);
+            this.typeahead_collection.fetch();
 
-            new Whisper.ConversationListView({
+            this.conversations = new Whisper.ConversationCollection();
+            this.inbox = new Whisper.ConversationListView({
                 el         : $('#contacts'),
                 collection : this.conversations
             });
@@ -40,7 +57,23 @@
         },
         events: {
             'click #new-message': 'new_message',
-            'click #new-group': 'new_group'
+            'click #new-group': 'new_group',
+            'change input.new-message': 'filterContacts',
+            'keyup input.new-message': 'filterContacts'
+        },
+        filterContacts: function() {
+            var query = this.$el.find('input.new-message').val();
+            if (query.length) {
+                this.typeahead_view.collection.reset(
+                    this.typeahead_collection.typeahead(query)
+                );
+                this.contacts.hide();
+                this.typeahead_view.$el.show();
+
+            } else {
+                this.contacts.show();
+                this.typeahead_view.$el.hide();
+            }
         },
         new_message: function (e) {
             e.preventDefault();