Typeahead now has actual queried suggestions. updates #215

converse.js

@@ -50,6 +50,12 @@
         return this;
     };
 
+    var predicate = function (attr, query) {
+        return function (item) {
+            return item.get(attr).toLowerCase().indexOf(query) === -1;
+        };
+    };
+
     $.fn.addEmoticons = function() {
         if (converse.visible_toolbar_buttons.emoticons) {
             if (this.length > 0) {
@@ -2005,8 +2011,12 @@
                     highlight: true
                 }, {
                     name: 'contacts-dataset',
-                    source: function (query, cb) {
-                        cb([{ val: 'dog' }, { val: 'pig' }, { val: 'moose' }]);
+                    source: function (q, cb) {
+                        var results = [];
+                        _.each(converse.roster.filter(predicate('fullname', q)), function (n) {
+                            results.push({value: n.get('fullname')});
+                        });
+                        cb(results);
                     }
                 });
                 return this;
@@ -3351,9 +3361,6 @@
                  * group must be filtered out as well.
                  */
                 var matches, rejects;
-                var predicate = function (item) {
-                    return item.get('fullname').toLowerCase().indexOf(q) === -1;
-                };
                 if (q.length === 0) {
                     if (this.model.get('state') === OPENED) {
                         this.model.contacts.each($.proxy(function (item) {
@@ -3365,14 +3372,14 @@
                     this.showIfInvisible();
                 } else {
                     q = q.toLowerCase();
-                    matches = this.model.contacts.filter(predicate);
+                    matches = this.model.contacts.filter(predicate('fullname', q));
                     if (matches.length === this.model.contacts.length) { // hide the whole group
                         this.hide();
                     } else {
                         _.each(matches, $.proxy(function (item) {
                             this.get(item.get('id')).$el.hide();
                         }, this));
-                        _.each(this.model.contacts.reject(predicate), $.proxy(function (item) {
+                        _.each(this.model.contacts.reject(predicate('fullname', q)), $.proxy(function (item) {
                             this.get(item.get('id')).$el.show();
                         }, this));
                         this.showIfInvisible();

css/converse.css

@@ -2,7 +2,7 @@
  * Converse.js (Web-based XMPP instant messaging client)
  * http://conversejs.org
  *
- * Copyright (c) 2012-2014, Jan-Carel Brand <jc@opkode.com>
+ * Copyright (c) 2012-2014, JC Brand <jc@opkode.com>
  * Licensed under the Mozilla Public License
  */
 @font-face {
@@ -574,14 +574,26 @@ span.spinner.hor_centered {
 #conversejs .tt-highlight {
   background-color: #00230F;
 }
+#conversejs div.tt-suggestion p:hover .tt-highlight {
+  background-color: #00230F;
+  background: #27774A;
+}
+#conversejs div.tt-suggestion p:hover {
+  background-color: #00230F;
+}
 #conversejs div.tt-suggestion p {
   color: white;
   text-shadow: rgba(0, 0, 0, 0.51) 0 -1px 0;
   cursor: pointer;
+  font-size: 11px;
 }
 #conversejs .tt-dropdown-menu {
   margin: 0 1px 0 1px;
-  min-width: 96px;
+  width: 96px;
+  max-height: 250px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  text-overflow: ellipsis;
   background: #27774A;
   border-bottom-right-radius: 4px;
   border-bottom-left-radius: 4px;

less/converse.less

@@ -618,15 +618,29 @@ span.spinner.hor_centered {
     background-color: #00230F;
 }
 
+#conversejs div.tt-suggestion p:hover .tt-highlight {
+    background-color: #00230F;
+    background: #27774A;
+}
+
+#conversejs div.tt-suggestion p:hover {
+    background-color: #00230F;
+}
+
 #conversejs div.tt-suggestion p {
     color: white;
     text-shadow: rgba(0,0,0,0.51) 0 -1px 0;
     cursor: pointer;
+    font-size: 11px;
 }
 
 #conversejs .tt-dropdown-menu {
     margin: 0 1px 0 1px;
-    min-width: 96px;
+    width: 96px;
+    max-height: 250px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    text-overflow: ellipsis;
     background: #27774A;
     border-bottom-right-radius: 4px;
     border-bottom-left-radius: 4px;