From 55b72ad4f95ba5f152c2658069e63c15d1f2df76 Mon Sep 17 00:00:00 2001 From: Silas Meister <silas.meister@stud.h-da.de> Date: Mon, 2 Oct 2023 07:25:41 +0200 Subject: [PATCH] Add unordered list to search results --- functions.js | 24 +++++++++++++++++++----- php/Index.php | 3 +-- styles.css | 20 ++++++++++++++++++++ 3 files changed, 40 insertions(+), 7 deletions(-) diff --git a/functions.js b/functions.js index 01c4625..d024583 100644 --- a/functions.js +++ b/functions.js @@ -53,23 +53,37 @@ function displaySearchResults(json) { searchResults.innerText = ""; + const ul = document.createElement('ul'); + json.forEach((news) => { - let child = createNewsChild(news); + const li = createNewsChild(news); - searchResults.appendChild(child); + ul.appendChild(li); }); + console.log(ul); + + searchResults.appendChild(ul); + const display = json.length === 0 ? "none" : "block";; searchResults.style.display = display; } function createNewsChild(news) { - let a = document.createElement('a'); + const li = document.createElement('li'); + const a = document.createElement('a'); - let textNode = document.createTextNode(news['title']); + const textNode = document.createTextNode(news['title']); a.appendChild(textNode); - return a; + const hrefAttr = document.createAttribute('href'); + hrefAttr.value = '#'; + + a.setAttributeNode(hrefAttr); + + li.appendChild(a); + + return li; } function slideImage() { diff --git a/php/Index.php b/php/Index.php index 7d39428..fbe42a0 100644 --- a/php/Index.php +++ b/php/Index.php @@ -68,8 +68,7 @@ class Index extends Page { <input id="search-input" name="search-input" type="search" placeholder="Search" /> <input id="search-button" type="button" value="" /> </form> - <div id="search-results"> - </div> + <div id="search-results"></div> </li> <li><img src="../img/share_icon.png" alt="" /></li> <li class="admin-button"><a href="Admin.php">Admin</a></li> diff --git a/styles.css b/styles.css index 6ddb775..bfcd7b1 100644 --- a/styles.css +++ b/styles.css @@ -121,6 +121,26 @@ a { border: 0.1rem solid white; border-radius: 0.1rem; max-width: 20rem; + padding: 0; + margin: 0; +} + +#search-results > ul { + list-style-type: none; + padding: 0; + margin: 0; +} + +#search-results > ul > li { + padding: 0.05rem; + margin: 0; +} + +#search-results > ul > li > a { + display: block; + word-wrap: break-word; + white-space: pre-wrap; + background-color: blue; } .admin-button a { -- GitLab