searchableSelect: add autocomplete

app/assets/javascripts/app/lib/app_post/searchable_select.js.coffee

@@ -2,6 +2,7 @@ class App.SearchableSelect extends Spine.Controller
 
   events:
     'input .js-input':                  'onInput'
+    'blur .js-input':                   'onBlur'
     'click .js-option':                 'selectItem'
     'mouseenter .js-option':            'highlightItem'
     'shown.bs.dropdown':  'onDropdownShown'
@@ -12,6 +13,8 @@ class App.SearchableSelect extends Spine.Controller
     '.js-input': 'input'
     '.js-shadow': 'shadowInput'
     '.js-optionsList': 'optionsList'
+    '.js-autocomplete-invisible': 'invisiblePart'
+    '.js-autocomplete-visible': 'visiblePart'
 
   className: 'searchableSelect dropdown dropdown--actions'
 
@@ -79,6 +82,22 @@ class App.SearchableSelect extends Spine.Controller
 
     @option_items.removeClass('is-active')
     visibleOptions.eq(currentPosition).addClass('is-active')
+    @clearAutocomplete()
+
+  autocomplete: (text) ->
+    startIndex = text.indexOf(@query)
+
+    if !@query or startIndex != 0
+      return @clearAutocomplete()
+
+    console.log "startIndex", startIndex
+
+    @invisiblePart.text(@query)
+    @visiblePart.text(text.slice(@query.length))
+
+  clearAutocomplete: ->
+    @visiblePart.text('')
+    @invisiblePart.text('')
 
   selectItem: (event) ->
     @input.val event.currentTarget.textContent.trim()
@@ -91,6 +110,8 @@ class App.SearchableSelect extends Spine.Controller
     event.preventDefault()
 
   onEnter: (event) ->
+    @clearAutocomplete()
+
     if not @isOpen
       if @shadowInput.val() is ''
         event.preventDefault()
@@ -105,6 +126,9 @@ class App.SearchableSelect extends Spine.Controller
     @shadowInput.trigger('change')
     @toggle()
 
+  onBlur: =>
+    @clearAutocomplete()
+
   onInput: (event) =>
     @toggle() if not @isOpen
 
@@ -123,7 +147,9 @@ class App.SearchableSelect extends Spine.Controller
     @highlightFirst()
 
   highlightFirst: ->
-    @option_items.removeClass('is-active').not('.is-hidden').first().addClass 'is-active'
+    first = @option_items.removeClass('is-active').not('.is-hidden').first()
+    first.addClass 'is-active'
+    @autocomplete first.text()
 
   highlightItem: (event) =>
     @option_items.removeClass('is-active')

app/assets/javascripts/app/views/generic/searchable_select.jst.eco

@@ -1,9 +1,4 @@
 <div class="dropdown-toggle" data-toggle="dropdown">
-  <input
-    class="form-control js-input<%= " #{ @class }" if @class %>"
-    placeholder="<%= @placeholder %>"
-    value="<%= @valueName %>"
-  >
   <input
     class="searchableSelect-shadow form-control js-shadow"
     id="<%= @id %>"
@@ -12,6 +7,12 @@
     <%= @autofocus %>
     value="<%= @value %>"
   >
+  <div class="searchableSelect-autocomplete"><span class="searchableSelect-autocomplete-invisible js-autocomplete-invisible"></span><span class="searchableSelect-autocomplete-visible js-autocomplete-visible"></span></div>
+  <input
+    class="searchableSelect-main form-control js-input<%= " #{ @class }" if @class %>"
+    placeholder="<%= @placeholder %>"
+    value="<%= @valueName %>"
+  >
   <svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down" /></svg>
   <div class="small loading icon"></div>
 </div>

app/assets/stylesheets/zammad.css.scss

@@ -5661,8 +5661,19 @@ output {
     padding-right: 37px;
   }
 
+  .searchableSelect-main {
+    background: none;
+    position: relative;
+  }
+  
   .searchableSelect-shadow {
-    display: none;
+    pointer-events: none;
+    color: transparent;
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    border: none;
   }
   
   &.dropdown li:hover:not(.is-active) {
@@ -5677,6 +5688,25 @@ output {
     box-shadow: 0 1px rgba(255,255,255,.13) inset;
   }
 
+  .searchableSelect-autocomplete {
+    position: absolute;
+    left: 13px;
+    top: 11px;
+    right: 37px;
+    white-space: nowrap;
+    overflow: hidden;
+    pointer-events: none;
+  }
+
+  .searchableSelect-autocomplete-invisible {
+    color: transparent;
+  }
+
+  .searchableSelect-autocomplete-visible {
+    color: hsl(0,0%,33%);
+    background: hsl(201,61%,90%);
+  }
+
   .loading.icon {
     position: absolute;
     right: 11px;