Enable searching and display results

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() {

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>

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();

styles.css

@@ -113,7 +113,8 @@ a {
     cursor: pointer;
 }
 
-.search-results {
+#search-results {
+    display: none;
     position: absolute;
     background-color: #333333;
     opacity: 0.9;