Merge pull request #76 from shaanguptaa/develop

Added Search By Tags Feature

docs/index.html

@@ -15,25 +15,52 @@
       <div class="search-box">
         <h1>Marathi Shabd</h1>
         <hr>
-        <h2>Enter english word to Translate</h2>
-        <input type="text" name="en-query" id="query_english"/>
-        <input type="button" name="en-search" id="en-search" value="Search" onclick="searchHandler()">
-        <script>
-        var input = document.getElementById("query_english");
-        input.addEventListener("keydown", function(event) {
-            if (event.code === "Enter") {
+        <div class="search-by-word" style="display: inline-block; margin-right: 10rem;">
+          <h2>Enter English Word to Translate</h2>
+          <input type="text" name="en-query" id="query_english" />
+          <input type="button" name="en-search" id="en-search" value="Search" onclick="searchHandler()">
+
+          <script>
+            var input = document.getElementById("query_english");
+            input.addEventListener("keydown", function (event) {
+              if (event.code === "Enter") {
                 searchHandler();
-            }
-        });
-        </script>
+              }
+            });
+          </script>
+        </div>
+
+        <div class="search-by-tag" style="display: inline-block;">
+          <h2>Select a Tag to Filter Words</h2>
+
+          <input list="search-items" id="search-box-tag" name="search-box-tag" placeholder="Select a Tag" />
+          <datalist id="search-items">
+            <!-- Options will be populated via populateSearch() -->
+          </datalist>
+
+          <input type="button" name="tag-search" id="tag-search" value="Filter" onclick="searchByTag()">
+          <script>
+            const searchTagInput = document.getElementById("search-box-tag");
+            searchTagInput.addEventListener("keydown", function (event) {
+              if (event.code === "Enter") {
+                searchByTag();
+              }
+            });
+            // clear imput when focused
+            searchTagInput.addEventListener("focus", function () {
+              searchTagInput.value = '';
+            });
+          </script>
+        </div>
       </div>
+
       <hr>
+
       <div class="results-box">
-        Results:
-        <div class="results-data" id="results-data">
-        </div>
+          Results:
+          <div class="results-data" id="results-data"></div>
       </div>
-    </div>
 
+    </div>
   </body>
 </html>

docs/script.js

@@ -1,8 +1,10 @@
 const csvData = []
+const uniqueTags = new Set()
 
 // Fetching the HTML DOM elements
 const results = document.querySelector('#results-data')
 const wordInput = document.querySelector('#query_english')
+const tagInput = document.querySelector("#search-box-tag")
 
 // Handler function for search button
 function searchHandler() {
@@ -13,7 +15,7 @@ function searchHandler() {
 
   // Remove leading and trailing whitespaces 
   searchKeyword = searchKeyword.trim()
-  
+
   // Search for the keyword from the array
   let matchedResults = csvData.filter(row => {
     return row.en == searchKeyword
@@ -50,7 +52,7 @@ function searchHandler() {
 
 // Preload - load all the csv data into an array
 async function fetchDataCSV() {
-  
+
   // fetch db.csv 
   fetch('../database/db.csv', {mode: 'no-cors'})
     .then(resp => resp.text())
@@ -73,8 +75,86 @@ async function fetchDataCSV() {
         })
       }
 
+      getUniqueTags();    // get all unique tags in the data
+      populateSearch();   // populate the searchlist using above tags
     })
     .catch(err => console.log(err))
 }
 
 fetchDataCSV()
+
+// get all unique tags from the data
+function getUniqueTags() {
+  for (let entry of csvData) {
+    if (typeof (entry['tags']) !== 'undefined') {
+      entry['tags'].split(';').forEach(tag => {
+        uniqueTags.add(tag);
+      });
+    }
+  }
+  uniqueTags.delete(''); // remove empty tags
+  uniqueTags.delete('tags'); // remove the header from csv
+}
+
+
+// populate the search box dropdown with tags
+function populateSearch() {
+  const searchItems = document.getElementById("search-items");
+  for (const tag of uniqueTags) {
+    // create a list-element for every tag found
+    const item = document.createElement("option");
+    item.setAttribute("value", tag);
+    searchItems.appendChild(item);
+  }
+}
+
+// search handler for searching via tags
+function searchByTag() {
+  tagInput.blur();    // remove focus from input
+  const searchQuery = tagInput.value;
+
+  // if search query is not a tag then return
+  if (!uniqueTags.has(searchQuery)) {
+    results.innerHTML = "Select an appropriate tag to filter words"
+    return
+  }
+
+  // FIlter the words with matching tags in the data
+  let matchedResults = csvData.filter(row => {
+    let t = row.tags;
+    return typeof (t) === 'string' && t.includes(searchQuery);
+  })
+
+  if (matchedResults.length === 0) {
+    results.innerHTML = "Currently no words are assigned to this tag"
+    return
+  }
+
+  // display results in results section
+  // create a list to wrap all the results
+  results.innerHTML = '<ul type="none" style="padding: 0;"></ul>';
+
+  for (const item of matchedResults) {
+    // create a list item for every matched result
+    const resultItem = document.createElement("li");
+    resultItem.innerHTML = "<span>";
+    resultItem.innerHTML += "<b>" + item.en.toUpperCase() + "</b> : ";
+    resultItem.innerHTML += item.mr + "<br>";
+
+    if (item.en_ex)
+      resultItem.innerHTML += "<b>English example: </b>" + item.en_ex + "<br>";
+    else
+      resultItem.innerHTML += "English example currently not available for this word<br>";
+
+    if (item.mr_ex)
+      resultItem.innerHTML += "<b>Marathi example: </b>" + item.mr_ex + "<br>";
+    else
+      resultItem.innerHTML += "Marathi example currently not available for this word<br>"
+
+    resultItem.innerHTML += "</span><br>";
+
+    // append the resultItem to result list
+    document.querySelector("#results-data > ul").appendChild(resultItem);
+  }
+  return
+}