diff --git a/css/search-box.css b/css/search-box.css index d9a2aa3..391c755 100644 --- a/css/search-box.css +++ b/css/search-box.css @@ -2,7 +2,7 @@ width: 100%; height: auto; - top: 60%; + top: 40%; opacity: 0; position: absolute; @@ -45,7 +45,7 @@ .showSearchBox { opacity: 1 !important; - top: 90% !important; + top: 70% !important; pointer-events: initial !important; } @@ -56,7 +56,7 @@ .showSearchBox { opacity: 1 !important; - top: 70% !important; + top: 65% !important; pointer-events: initial !important; } } diff --git a/css/suggestions.css b/css/suggestions.css index f2085e5..16d3826 100644 --- a/css/suggestions.css +++ b/css/suggestions.css @@ -51,8 +51,12 @@ height: auto; /*Always center horizontally*/ - display: table-cell; - width: auto; + /*display: table-cell;*/ + /*width: auto;*/ + /*text-align: center;*/ + + display: inline-flex; + width: 100%; text-align: center; } @@ -81,4 +85,13 @@ .phraseButton:active { background: var(--base-active-bg); +} + +@media screen and (max-width: 580px) { + /*The Li*/ + #phrase { + display: inline-flex !important; + width: 100% !important; + text-align: center !important; + } } \ No newline at end of file diff --git a/js/auto-suggest.js b/js/auto-suggest.js index 972fe3a..24484aa 100644 --- a/js/auto-suggest.js +++ b/js/auto-suggest.js @@ -2,10 +2,10 @@ var searchBox = document.getElementById('searchBox'); var suggestionsUL = document.getElementById('suggestions'); var suggestionsContainer = document.getElementById('suggestionsContainer'); +// Create input events +const phraseEvents = button => { -// Update searchbox on enter key -const phraseButtonCallback = button => { - + // Update searchbox on enter key and mouse click button.onkeyup = event => { if (event.key === 'Enter') { @@ -13,15 +13,25 @@ const phraseButtonCallback = button => { searchBox.value = button.innerText; searchBox.focus(); + } else if (event.key === 'Backspace') { + + searchBox.focus(); } } + // Onmouseup event + button.onmouseup = event => { + searchBox.value = button.innerText; + searchBox.focus(); + } + } // Generate and parse suggestions const autocompleteCallback = phrase => { + // Filter/parse the object var suggestion = phrase.map(i => i.phrase) .filter(s => !(s.toLowerCase() === String(searchBox.value).toLowerCase())) .slice(0, 4); @@ -33,6 +43,7 @@ const autocompleteCallback = phrase => { // Generate list elements for (i = 0; i < (suggestion.length); i++) { + // Create html elements var li = document.createElement('li'); li.id = 'phrase'; @@ -41,8 +52,12 @@ const autocompleteCallback = phrase => { button.className = 'phraseButton'; button.innerHTML = suggestion[i]; - phraseButtonCallback(button); + // Create input events + phraseEvents(button); + + + // Appent to ul li.appendChild(button); suggestionsUL.appendChild(li); } @@ -64,6 +79,7 @@ searchBox.onkeyup = event => { return; } + // Fetch from duckduckgo var script = document.createElement('script'); script.type = "text/javascript"; script.src = "https://duckduckgo.com/ac/?callback=autocompleteCallback&q="+String(searchBox.value);