Improved client combobox

resources/assets/css/style.css

@@ -424,6 +424,18 @@ ul.dropdown-menu,
     overflow-x: hidden;
 }
 
+ul.typeahead li:first-child {
+    border-top: solid 1px #EEE;
+}
+
+ul.typeahead li {
+    border-bottom: solid 1px #EEE;
+}
+
+.combobox-container .active {
+    border-color: #EEE !important;
+}
+
 .panel-default,
 canvas {
     border: 1px solid;

resources/assets/js/script.js

@@ -447,6 +447,13 @@ if (window.ko) {
   };
 }
 
+function comboboxHighlighter(item) {
+    var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&');
+    return item.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
+        return match ? '<strong>' + match + '</strong>' : query;
+    })
+}
+
 function getContactDisplayName(contact)
 {
     if (contact.first_name || contact.last_name) {
@@ -456,6 +463,21 @@ function getContactDisplayName(contact)
     }
 }
 
+function getContactDisplayNameWithEmail(contact)
+{
+    var str = '';
+
+    if (contact.first_name || contact.last_name) {
+        str += $.trim((contact.first_name || '') + ' ' + (contact.last_name || ''));
+    }
+
+    if (contact.email) {
+        str += ' &lt;' + contact.email + '&gt;';
+    }
+
+    return $.trim(str);
+}
+
 function getClientDisplayName(client)
 {
   var contact = client.contacts ? client.contacts[0] : false;

resources/views/invoices/edit.blade.php

@@ -101,7 +101,11 @@
 				<div style="display:none">
     		@endif
 
-            {!! Former::select('client')->addOption('', '')->data_bind("dropdown: client")->addClass('client-input')->addGroupClass('client_select closer-row') !!}
+            {!! Former::select('client')
+					->addOption('', '')
+					->data_bind("dropdown: client, dropdownOptions: {highlighter: comboboxHighlighter}")
+					->addClass('client-input')
+					->addGroupClass('client_select closer-row') !!}
 
 			<div class="form-group" style="margin-bottom: 8px">
 				<div class="col-lg-8 col-sm-8 col-lg-offset-4 col-sm-offset-4">
@@ -838,21 +842,21 @@
         for (var i=0; i<clients.length; i++) {
             var client = clients[i];
             clientMap[client.public_id] = client;
-            var clientName = getClientDisplayName(client);
             @if (! $invoice->id)
-	            if (!clientName) {
+	            if (!getClientDisplayName(client)) {
 	                continue;
 	            }
             @endif
-            for (var j=0; j<client.contacts.length; j++) {
+			var clientName = client.name;
+			for (var j=0; j<client.contacts.length; j++) {
                 var contact = client.contacts[j];
-                var contactName = getContactDisplayName(contact);
-                if (contact.is_primary === '1') {
-                    contact.send_invoice = true;
-                }
-                if (contactName && clientName != contactName) {
-                    $clientSelect.append(new Option(contactName, client.public_id));
-                }
+                var contactName = getContactDisplayNameWithEmail(contact);
+				if (clientName && contactName) {
+					clientName += '<br/>  • ';
+				}
+				if (contactName) {
+					clientName += contactName;
+				}
             }
             $clientSelect.append(new Option(clientName, client.public_id));
         }