Enable typeahead on the input and style the suggestions dropdown. updates #215

converse.js

@@ -1999,6 +1999,19 @@
                 }
             },
 
+            initTypeAheadInviteWidget: function () {
+                this.$('input.invited-contact').typeahead({
+                    minLength: 1,
+                    highlight: true
+                }, {
+                    name: 'contacts-dataset',
+                    source: function (query, cb) {
+                        cb([{ val: 'dog' }, { val: 'pig' }, { val: 'moose' }]);
+                    }
+                });
+                return this;
+            },
+
             renderChatArea: function () {
                 if (!this.$el.find('.chat-area').length) {
                     this.$el.find('.chat-body').empty().append(
@@ -2007,7 +2020,7 @@
                             'label_message': __('Message')
                         })
                     );
-                    this.renderToolbar();
+                    this.initTypeAheadInviteWidget().renderToolbar();
                 }
                 return this;
             },

css/converse.css

@@ -3,7 +3,7 @@
  * http://conversejs.org
  *
  * Copyright (c) 2012-2014, Jan-Carel Brand <jc@opkode.com>
- * Licensed under the Mozilla Public License 
+ * Licensed under the Mozilla Public License
  */
 @font-face {
   font-family: 'Converse-js';
@@ -567,10 +567,25 @@ span.spinner.hor_centered {
   background-color: white;
   overflow: auto;
   border-left: 1px solid #AAA;
-  width: 100px;
   border-bottom-right-radius: 4px;
+  width: 100px;
   height: 100%;
 }
+#conversejs .tt-highlight {
+  background-color: #00230F;
+}
+#conversejs div.tt-suggestion p {
+  color: white;
+  text-shadow: rgba(0, 0, 0, 0.51) 0 -1px 0;
+  cursor: pointer;
+}
+#conversejs .tt-dropdown-menu {
+  margin: 0 1px 0 1px;
+  min-width: 96px;
+  background: #27774A;
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
 #conversejs .chatroom div.participants label {
   font-style: italic;
 }
@@ -578,10 +593,10 @@ span.spinner.hor_centered {
   margin-left: 2px;
   font-size: 12px;
 }
-#conversejs .chatroom #invited-contact {
-  margin: 1px;
-  margin-top: 2px;
+#conversejs .chatroom .invited-contact {
+  margin: 2px 1px 0 1px;
   width: 96px;
+  border: 1px solid #999;
 }
 #conversejs .participants ul.participant-list li {
   overflow: hidden;

less/converse.less

@@ -2,8 +2,8 @@
  * Converse.js (Web-based XMPP instant messaging client)
  * http://conversejs.org
  *
- * Copyright (c) 2012-2014, Jan-Carel Brand <jc@opkode.com>
- * Licensed under the Mozilla Public License 
+ * Copyright (c) 2012-2014, JC Brand <jc@opkode.com>
+ * Licensed under the Mozilla Public License
  */
 
 @import "variables.less";
@@ -609,11 +609,29 @@ span.spinner.hor_centered {
     background-color: white;
     overflow: auto;
     border-left: 1px solid #AAA;
-    width: 100px;
     border-bottom-right-radius: 4px;
+    width: 100px;
     height: 100%;
 }
 
+#conversejs .tt-highlight {
+    background-color: #00230F;
+}
+
+#conversejs div.tt-suggestion p {
+    color: white;
+    text-shadow: rgba(0,0,0,0.51) 0 -1px 0;
+    cursor: pointer;
+}
+
+#conversejs .tt-dropdown-menu {
+    margin: 0 1px 0 1px;
+    min-width: 96px;
+    background: #27774A;
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+}
+
 #conversejs .chatroom div.participants label {
     font-style: italic;
 }
@@ -623,10 +641,10 @@ span.spinner.hor_centered {
     font-size: 12px;
 }
 
-#conversejs .chatroom #invited-contact {
-    margin: 1px;
-    margin-top: 2px;
+#conversejs .chatroom .invited-contact {
+    margin: 2px 1px 0 1px;
     width: 96px;
+    border: 1px solid #999;
 }
 
 #conversejs .participants ul.participant-list li {
@@ -832,12 +850,12 @@ dl.add-converse-contact {
 }
 
 #conversejs .fancy-dropdown a.toggle-xmpp-contact-form span {
-   float: left; 
+   float: left;
 }
 
 #conversejs .choose-xmpp-status span {
-    padding-right: 5px; 
-    padding-left: 5px; 
+    padding-right: 5px;
+    padding-left: 5px;
     float: left;
 }
 
@@ -1430,12 +1448,12 @@ select#select-xmpp-status {
     display: inline-block;
     list-style: none;
     padding: 0 3px 0 3px;
-    cursor: pointer; 
+    cursor: pointer;
     margin-top: 1px;
 }
 
 #conversejs ul.chat-toolbar li:hover {
-    cursor: pointer; 
+    cursor: pointer;
 }
 
 #conversejs form#set-custom-xmpp-status {
@@ -1496,8 +1514,8 @@ input.custom-xmpp-status {
 }
 
 #conversejs .chatbox .dropdown dt a span {
-    cursor: pointer; 
-    display:block; 
+    cursor: pointer;
+    display:block;
     padding: 4px 7px 0 5px;
     color: rgb(79, 79, 79);
 }

mockup/index.html

@@ -402,7 +402,7 @@
                 </div>
                 <div class="participants">
                     <form class="room-invite">
-                        <input id="invited-contact" placeholder="Invite someone" type="text"/>
+                        <input class="invited-contact" placeholder="Invite someone" type="text"/>
                     </form>
                     <label>Participants:</label>
                     <ul class="participant-list">

src/templates/chatarea.html

@@ -10,7 +10,8 @@
 </div>
 <div class="participants">
     <form class="room-invite">
-        <input id="invited-contact" placeholder="Invite someone" type="text"/>
+        <input class="invited-contact" placeholder="Invite someone" type="text"/>
     </form>
+    <label>Participants:</label>
     <ul class="participant-list"></ul>
 </div>