diff --git a/functions.js b/functions.js index 8162393781ab2b98ebae800582e0c0d1fbddc66f..01c46256bd678137d60b28062a5238d0da523ae1 100644 --- a/functions.js +++ b/functions.js @@ -49,10 +49,27 @@ function fetchNews(searchWord) { } function displaySearchResults(json) { - let searchResults = document.getElementById(); + const searchResults = document.getElementById('search-results'); + + searchResults.innerText = ""; + json.forEach((news) => { - console.log(news['title']); + let child = createNewsChild(news); + + searchResults.appendChild(child); }); + + const display = json.length === 0 ? "none" : "block";; + searchResults.style.display = display; +} + +function createNewsChild(news) { + let a = document.createElement('a'); + + let textNode = document.createTextNode(news['title']); + a.appendChild(textNode); + + return a; } function slideImage() { diff --git a/php/Index.php b/php/Index.php index 84fa7710171cca5a3b70bd61010c73bec03b9412..7d39428f52a3b7904ed0793face6eacdb8401de6 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 class="search-results"> - <p>sdfdsfsdfasfdasfasfas</p> + <div id="search-results"> </div> </li> <li><img src="../img/share_icon.png" alt="" /></li> diff --git a/php/NewsFetch.php b/php/NewsFetch.php index fa21ad5d5925038a1901755fb090db581092511e..d8db0e2f1af831a90d9e3cec5d009d54ab8d3dba 100644 --- a/php/NewsFetch.php +++ b/php/NewsFetch.php @@ -26,9 +26,12 @@ class NewsFetch extends Page { $data = array(); + if (empty(trim($this->searchWord))) + return $data; + $likeSearchWord = "%" . $this->searchWord . "%"; - $stmt = $this->database->prepare("SELECT n.title FROM news n WHERE n.title LIKE ? LIMIT 5"); + $stmt = $this->database->prepare("SELECT n.title FROM news n WHERE LOWER(n.title) LIKE LOWER(?) LIMIT 5"); $stmt->bind_param("s", $likeSearchWord); $stmt->execute(); $resultSet = $stmt->get_result(); diff --git a/styles.css b/styles.css index 15c03eaaecf30549b2c12e763c72b10b2eac0298..6ddb775b4781f37d9c73769e9e0c7b8beb304fd9 100644 --- a/styles.css +++ b/styles.css @@ -113,7 +113,8 @@ a { cursor: pointer; } -.search-results { +#search-results { + display: none; position: absolute; background-color: #333333; opacity: 0.9;