diff --git a/functions.js b/functions.js index 01c46256bd678137d60b28062a5238d0da523ae1..d0245836b617e54b611c0569562f6027a7e310ae 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 7d39428f52a3b7904ed0793face6eacdb8401de6..fbe42a089f22921687b4f7df5f8b465173eee767 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 6ddb775b4781f37d9c73769e9e0c7b8beb304fd9..bfcd7b1df0912c6ee93a008ab94de12ef86e1f17 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 {