From 53a79d5074b985e1d577f83ae06358aa68f77bef Mon Sep 17 00:00:00 2001
From: Silas Meister <silas.meister@stud.h-da.de>
Date: Thu, 28 Sep 2023 15:52:23 +0200
Subject: [PATCH] Enable searching and display results
---
functions.js | 21 +++++++++++++++++++--
php/Index.php | 3 +--
php/NewsFetch.php | 5 ++++-
styles.css | 3 ++-
4 files changed, 26 insertions(+), 6 deletions(-)
diff --git a/functions.js b/functions.js
index 8162393..01c4625 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 84fa771..7d39428 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 fa21ad5..d8db0e2 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 15c03ea..6ddb775 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;
--
GitLab