From 69e5857963ceaca4ac57598f1d87dde33eb588d1 Mon Sep 17 00:00:00 2001 From: Daniel Triendl Date: Tue, 27 Jun 2023 17:23:37 +0200 Subject: [PATCH] Fix tapi search results --- src/search.css | 42 +++++++++++++++++++---- src/search.ts | 91 ++++++++++++++++---------------------------------- 2 files changed, 65 insertions(+), 68 deletions(-) diff --git a/src/search.css b/src/search.css index 7232c2b..241de47 100644 --- a/src/search.css +++ b/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; } - diff --git a/src/search.ts b/src/search.ts index 32a0453..46fbeb3 100644 --- a/src/search.ts +++ b/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((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 = 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 = 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) {