Fix tapi search results

src/search.css

@@ -1,9 +1,39 @@
-.tapi-search-result {
+.tapi-search-autocomplete {
+    /*the container must be positioned relative:*/
+    position: relative;
+    display: inline-block;
+    margin-right: 20px;
+  }
+.tapi-search-autocomplete input {
+    border: 1px solid transparent;
+    background-color: #f1f1f1;
+    /*padding: 10px;*/
+    /*font-size: 16px;*/
+}
+.tapi-search-autocomplete input[type=text] {
+    background-color: #f1f1f1;
+    width: 100%;
+}
+
+.tapi-search-autocomplete-items {
+    position: absolute;
+    border: 1px solid #d4d4d4;
+    border-bottom: none;
+    border-top: none;
+    z-index: 99;
+    /*position the autocomplete items to be the same width as the container:*/
+    top: 100%;
+    left: 0;
+    right: 0;
+}
+.tapi-search-autocomplete-items div {
+    padding: 10px;
+    cursor: pointer;
+    background-color: #fff;
+    border-bottom: 1px solid #d4d4d4;
     color: #000;
-    padding: 5px;
 }
-
-.tapi-search-result:hover, .tapi-search-result-selected {
-    background-color: #E7E6E6;
+.tapi-search-autocomplete-items div:hover, .tapi-search-autocomplete-active {
+    /*when hovering an item:*/
+    background-color: #E7E6E6 !important;
 }
-

src/search.ts

@@ -10,13 +10,10 @@ export class Search {
     console.log('Create TAPI Search')
 
     var form = document.createElement('form')
-    form.style.width = '200px'
-    form.style.float = 'right'
-    form.style.marginRight = '20px'
     form.onsubmit = () => {
-      var items = document.getElementsByClassName('tapi-search-result-selected')
+      var items = document.getElementsByClassName('tapi-search-autocomplete-active')
       if (items.length === 0) {
-        items = document.getElementsByClassName('tapi-search-result')
+        items = document.getElementsByClassName('tapi-search-autocomplete-item')
       }
       if (items.length > 0) {
         this.dial((<HTMLElement>items[0]).dataset.tapiNumber)
@@ -28,23 +25,14 @@ export class Search {
     }
 
     var searchBox = document.createElement('div')
-    searchBox.classList.add('contact-search-box')
+    searchBox.classList.add('tapi-search-autocomplete')
+    searchBox.style.width = '200px'
     searchBox.id = 'tapiSearchBox'
     form.appendChild(searchBox)
 
-    var searchWrapper = document.createElement('div')
-    searchWrapper.classList.add('search-input-wrapper')
-    searchWrapper.style.position = 'relative'
-    searchBox.appendChild(searchWrapper)
-
     var search = document.createElement('input')
     search.id = 'tapiSearchInput'
     search.autocomplete = 'off'
-    search.classList.add('padder')
-    search.classList.add('rounded')
-    search.classList.add('bg-light')
-    search.classList.add('no-border')
-    search.classList.add('contact-search-box')
     search.placeholder = 'TAPI Suche'
     search.onfocus = () => { this.doSearch() }
     search.onkeydown = (ev) => { this.doSearchKeyDown(ev) }
@@ -53,22 +41,15 @@ export class Search {
       setTimeout(() => {
         console.log('TAPI clear search results')
         this.removeSearchResults()
-      }, 500)
+      }, 250)
     }
-    searchWrapper.appendChild(search)
-
-    var icon = document.createElement('span')
-    icon.classList.add('fa')
-    icon.classList.add('fa-search')
-    icon.classList.add('form-control-feedback')
-    icon.style.color = 'grey'
-    searchWrapper.appendChild(icon)
+    searchBox.appendChild(search)
 
     element.parentElement.insertBefore(form, element)
   }
 
   private removeSearchResults () {
-    var resultList = document.getElementById('tapiResults')
+    var resultList = document.getElementById('tapi-search-autocomplete-list')
     if (resultList) {
       resultList.parentNode.removeChild(resultList)
     }
@@ -77,12 +58,12 @@ export class Search {
 
   private doSearchKeyDown (ev: KeyboardEvent) {
     if (ev.key === 'ArrowUp') {
-      let items = document.getElementsByClassName('tapi-search-result-selected')
+      let items = document.getElementsByClassName('tapi-search-autocomplete-active')
       if (items.length > 0) {
         var prev = <Element>items[0].previousSibling
       }
       if (!prev) {
-        items = document.getElementsByClassName('tapi-search-result')
+        items = document.getElementsByClassName('tapi-search-autocomplete-item')
         if (items.length > 0) {
           prev = items[items.length - 1]
         }
@@ -92,12 +73,12 @@ export class Search {
         prev.scrollIntoView(true)
       }
     } else if (ev.key === 'ArrowDown') {
-      let items = document.getElementsByClassName('tapi-search-result-selected')
+      let items = document.getElementsByClassName('tapi-search-autocomplete-active')
       if (items.length > 0) {
         var next = <Element>items[0].nextSibling
       }
       if (!next) {
-        items = document.getElementsByClassName('tapi-search-result')
+        items = document.getElementsByClassName('tapi-search-autocomplete-item')
         if (items.length > 0) {
           next = items[0]
         }
@@ -128,45 +109,31 @@ export class Search {
     this.removeSearchResults()
     this.currentSearchText = searchText
 
-    var resultList = document.createElement('ul')
-    resultList.id = 'tapiResults'
-    resultList.classList.add('search-nav-absolute')
-    resultList.classList.add('search-nav-ul')
-    document.getElementById('tapiSearchBox').appendChild(resultList)
+    var results = document.createElement('div');
+    results.setAttribute('id', 'tapi-search-autocomplete-list')
+    results.setAttribute('class', 'tapi-search-autocomplete-items')
+    document.getElementById('tapiSearchBox').appendChild(results)
 
-    resultList.innerHTML = ''
     contacts.forEach(contact => {
-      var li = document.createElement('li')
-      li.classList.add('tapi-search-result')
-      li.classList.add('pointer')
-      li.onmouseover = () => { this.selectResult(li) }
-      li.dataset.tapiNumber = contact.tD_NUMBER_TAPI
-      li.onclick = () => { this.dial(contact.tD_NUMBER_TAPI) }
-      li.style.listStyle = 'outside none none' // display: flex; align-items: center;
-
-      var resultText = document.createElement('div')
-      resultText.classList.add('search-result-txt')
-      li.appendChild(resultText)
-
-      var line1 = document.createElement('div')
-      line1.appendChild(document.createTextNode(contact.tD_NAME))
-      resultText.appendChild(line1)
-
-      var line2 = document.createElement('div')
-      line2.appendChild(document.createTextNode(contact.tD_MEDIUM + ': ' + contact.tD_NUMBER_TAPI))
-      resultText.appendChild(line2)
-
-      resultList.appendChild(li)
+      var item = document.createElement('div');
+      item.setAttribute('class', 'tapi-search-autocomplete-item')
+      item.appendChild(document.createTextNode(contact.tD_NAME))
+      item.appendChild(document.createTextNode(contact.tD_MEDIUM + ': ' + contact.tD_NUMBER_TAPI))
+      item.onclick = () => { this.dial(contact.tD_NUMBER_TAPI) }
+      item.onmouseover = () => { this.selectResult(item) }
+      item.dataset.tapiNumber = contact.tD_NUMBER_TAPI
+      results.appendChild(item);
     })
   }, 200)
 
-  private selectResult (resultLi: Element) {
-    var items = document.getElementsByClassName('tapi-search-result')
-    for (var item of items) {
-      item.classList.remove('tapi-search-result-selected')
+  private selectResult (item: Element) {
+    console.log('Select item', item)
+    var items = document.getElementsByClassName('tapi-search-autocomplete-active')
+    for (var i of items) {
+      i.classList.remove('tapi-search-autocomplete-active')
     }
 
-    resultLi.classList.add('tapi-search-result-selected')
+    item.classList.add('tapi-search-autocomplete-active')
   }
 
   private dial (number: string) {