add add search

static/main.js

@@ -0,0 +1,224 @@
+function semantic_search() {
+  if ($("#search_query").val() != "") {
+    $("#tag_list").empty();
+    $("#wordcloud").empty();
+    $("#results").empty();
+    $("#add_search").empty();
+    $("#wordcloud").append(`
+    <div class="spinner-border text-primary" role="status">
+        <span class="visually-hidden">Loading...</span>
+    </div>`);
+
+    top_k = parseInt($("#top_k").val());
+    if (isNaN(top_k)) {
+      top_k = 100;
+    }
+
+    similarity = parseFloat($("#similarity").val());
+    if (isNaN(similarity)) {
+      similarity = 0.0;
+    }
+
+    data = {
+      query: $("#search_query").val(),
+      top_k: top_k,
+      similarity: similarity,
+      start_date: $("#start_date").val(),
+      end_date: $("#end_date").val(),
+    };
+    data = JSON.stringify(data);
+
+    console.log(data);
+
+    $.ajax({
+      url: "/semantic_search",
+      type: "post",
+      dataType: "json", // 預期從 server 接收的資料型態
+      contentType: "application/json; charset=utf-8", // 要送到 server 的資料型態
+      data: data,
+    })
+      .done(function (data) {
+        data = JSON.parse(data["semantic_search"]);
+        $("#results").empty();
+        $("#results").append(`
+        <table class="table table-striped table-hover">
+          <thead>
+            <tr>
+              <th>title</th>
+              <th>content_tags</th>
+              <th>descriptionFilterHtml</th>
+              <th>masterUnit</th>
+              <th>startDate</th>
+              <th>endDate</th>
+            </tr>
+          </thead>
+          <tbody></tbody>
+        </table>`);
+        $.each(data, function (indexInArray, valueOfElement) {
+          $("tbody").append(`
+          <tr>
+            <td>${valueOfElement.title}</td>
+            <td>
+              <details>
+               <summary>${
+                 valueOfElement.content_tags.slice(0, 10) + "..."
+               }</summary>
+              <p>${valueOfElement.content_tags}</p>
+              </details>
+            </td>
+            <td>
+              <details>
+                <summary>${
+                  valueOfElement.descriptionFilterHtml.slice(0, 50) + "..."
+                }
+                </summary>
+                <p>${valueOfElement.descriptionFilterHtml}</p>
+              </details>
+            </td>
+            <td>${valueOfElement.masterUnit}</td>
+            <td>${valueOfElement.startDate}</td>
+            <td>${valueOfElement.endDate}</td>
+           </tr>
+          `);
+        });
+
+        $("table").DataTable({
+          order: [],
+        });
+      })
+      .fail(function () {
+        console.log("error");
+      });
+
+    $.ajax({
+      url: "/wordcloud",
+      type: "post",
+      dataType: "json", // 預期從server接收的資料型態
+      contentType: "application/json; charset=utf-8", // 要送到server的資料型態
+      data: data,
+    })
+      .done(function (data) {
+        data = JSON.parse(data["wordcloud"]);
+        $("#wordcloud").empty();
+        $("#wordcloud").append(data);
+      })
+      .fail(function () {
+        console.log("error");
+      });
+
+    $.ajax({
+      url: "/tag_list",
+      type: "post",
+      dataType: "json", // 預期從server接收的資料型態
+      contentType: "application/json; charset=utf-8", // 要送到server的資料型態
+      data: data,
+    })
+      .done(function (data) {
+        data = JSON.parse(data["tag_list"]);
+
+        $("#tag_list").empty();
+        if (data.length != 0) {
+        	$("#tag_list").append(`Top 100 Tags<br>`);
+
+          	$.each(data, function (indexInArray, valueOfElement) {
+            	$("#tag_list").append(`
+              		<span class="badge bg-primary">#${valueOfElement}&nbsp;</span>
+            	`);
+          	});
+        }
+
+		let contentList = [];
+      	let falseCount = 0;
+		let len = (data.length>=5)? 5: data.length;
+		for (i=0; i<len; i++){
+	  	$("#add_search").append(`
+            <button type="button" onclick="addValue('${data[i]}')" class="btn btn-outline-dark rounded-pill py-0 me-1">
+            <div class="d-flex align-items-center">
+            <span>＋</span> <p class="m-0 pe-1">${data[i]}</p> 
+            </div>
+            </button>`);
+	  
+		}
+      })
+      .fail(function () {
+        console.log("tag list error");
+      });
+  }
+}
+
+$("#search").on("click", function () {
+  semantic_search();
+});
+
+$("#search_query").on("keyup", function (event) {
+  // Number 13 is the "Enter" key on the keyboard
+  if (event.keyCode === 13) {
+    // Cancel the default action, if needed
+    event.preventDefault();
+    // Trigger the button element with a click
+    $("#search").click();
+  }
+});
+
+// 延遲取得輸入值
+function delayInput(fn, ms) {
+  let timer = 0;
+  return function (...args) {
+    clearTimeout(timer);
+    timer = setTimeout(fn.bind(this, ...args), ms || 0);
+  };
+}
+
+// $("#search_query").keyup(
+//   delayInput(function () {
+//     console.log("Time elapsed!", this.value);
+//     getSearchData(this.value);
+//   }, 500)
+// );
+
+function getSearchData(params) {
+  $.ajax({
+    url: "static/data.json",
+    type: "get",
+    dataType: "json",
+    contentType: "application/json; charset=utf-8",
+  })
+    .done((data) => {
+      let contentList = [];
+      let falseCount = 0;
+      data.map((e) => {
+        if (params !== "" && e.inputValue === params) {
+          e.data.map((item) => {
+            let content = `
+            <button type="button" onclick="addValue('${item}')" class="btn btn-outline-dark rounded-pill py-0 me-1">
+              <div class="d-flex align-items-center">
+              <span>＋</span> <p class="m-0 pe-1">${item}</p> 
+              </div>
+            </button>`;
+
+            contentList.push(content);
+          });
+        } else {
+          // 錯誤計數
+          falseCount++;
+        }
+
+        // 無符合結果則清空
+        if (falseCount === e.data.length) {
+          contentList = [];
+          $(".add_search").html(contentList);
+        } else {
+          $(".add_search").html(contentList);
+        }
+      });
+    })
+    .fail((err) => {
+      console.log("add search error", err);
+    });
+}
+
+function addValue(params) {
+  document.getElementById("search_query").value =
+    document.getElementById("search_query").value + ` ${params}`;
+    //$("#search").click();
+}

templates/index.html

@@ -1,259 +1,104 @@
 <!DOCTYPE html>
 <html lang="zh-TW">
-
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"
-        integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
-
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
-    <script src="https://code.jquery.com/jquery-3.6.0.js"
-        integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
-
-    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.0/css/dataTables.bootstrap5.min.css">
-    <script src="https://cdn.datatables.net/1.11.0/js/jquery.dataTables.min.js"></script>
-    <script src="https://cdn.datatables.net/1.11.0/js/dataTables.bootstrap5.min.js"></script>
-
-
-    <style>
-        @font-face {
+	<head>
+		<meta charset="UTF-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"
+			integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
+		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+						   <link rel="stylesheet" href="https://cdn.datatables.net/1.11.0/css/dataTables.bootstrap5.min.css">
+
+  <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
+	           crossorigin="anonymous"></script>
+				  <script src="https://cdn.datatables.net/1.11.0/js/jquery.dataTables.min.js"></script>
+					         <script src="https://cdn.datatables.net/1.11.0/js/dataTables.bootstrap5.min.js"></script>
+
+  <style>
+      @font-face {
             font-family: my_font;
-            src: local("zh-cn.ttf") format("opentype");
-        }
-
-        *{
-            font-family: my_font;
-        }
-    </style>
-
-
-    <title>iCulture</title>
-
-</head>
-
-<body>
-
-    <div class="container">
-        <div class="p-5 mt-5">
-
-            <div class="mb-3">
-                <div for="search_query" class="form-label fw-bold">iCulture Semantic Search</div>
-                <hr>
-                <div class="row mb-3">
-
-                    <div class="col">
-                        <label for="start_date" class="form-label">Start Date</label>
-                        <input type="date" name="start_date" class="form-control col" id="start_date">
-                    </div>
-                    <div class="col">
-                        <label for="end_date" class="form-label">End Date</label>
-                        <input type="date" name="end_date" class="form-control col" id="end_date">
-                    </div>
-                </div>
-                <div class="row mb-3">
-                    <div class="col">
-                        <label for="top_k" class="form-label">Top K</label>
-                        <input type="number" name="top_k" class="form-control col" id="top_k"
-                            placeholder="default: 100">
-                    </div>
-                    <div class="col">
-                        <label for="similarity" class="form-label">Similarity</label>
-                        <input type="number" name="similarity" class="form-control col" id="similarity"
-                            placeholder="-1 - 1 (default: 0)">
-                    </div>
-                </div>
-                <label for="search_query" class="form-label">Search Query</label>
-                <div class="input-group mb-3">
-
-                    <input type="text" name="query" class="form-control" id="search_query"
-                        placeholder="Search query...">
-                    <button class="btn btn-outline-primary" type="button" id="search"><i
-                            class="fas fa-search"></i></button>
-                </div>
-            </div>
-        </div>
-        <div class="p-1 text-center" id="wordcloud">
-
-        </div>
-        <div class="p-5 about" id="tag_list">
-
-        </div>
-        <div class="p-5" id="results">
-
-        </div>
-    </div>
-
-
-
-    <!-- Optional JavaScript; choose one of the two! -->
-
-    <!-- Option 1: Bootstrap Bundle with Popper -->
+	          src: local("zh-cn.ttf") format("opentype");
+			          }
+
+    * {
+          font-family: my_font;
+	      }
+
+    .add_search span {
+          margin-bottom: 2px;
+	        font-size: 22px;
+		    }
+
+    .add_search div {
+          margin-top: 1px;
+	      }
+	        </style>
+
+
+  <title>iCulture</title>
+
+	</head>
+
+	<body>
+		<div class="container">
+	    	<div class="p-5 mt-5">
+				<div class="mb-3">
+		          	<div for="search_query" class="form-label fw-bold">iCulture Semantic Search</div>
+				    	<hr>
+					    	<div class="row mb-3">
+
+          						<div class="col">
+		                  			<label for="start_date" class="form-label">Start Date</label>
+									<input type="date" name="start_date" class="form-control col" id="start_date">
+								</div>
+						        <div class="col">
+									<label for="end_date" class="form-label">End Date</label>
+									<input type="date" name="end_date" class="form-control col" id="end_date">
+								</div>
+							</div>
+					        <div class="row mb-3">
+			            		<div class="col">
+									<label for="top_k" class="form-label">Top K</label>
+									<input type="number" name="top_k" class="form-control col" id="top_k" placeholder="default: 100">
+								</div>
+								<div class="col">
+									<label for="similarity" class="form-label">Similarity</label>
+									<input type="number" name="similarity" class="form-control col" id="similarity" placeholder="-1 - 1 (default: 0)">
+								</div>
+							</div>
+							<label for="search_query" class="form-label">Search Query</label>
+							<div class="input-group mb-3">
+								<input type="text" name="query" class="form-control" id="search_query" placeholder="Search query...">
+								<button class="btn btn-outline-primary" type="button" id="search"><i class="fas fa-search"></i></button>
+				  		    </div>
+						    <div class="d-flex align-items-center" style="height: 30px;">
+								擴大搜尋：
+								<div id="add_search" class="add_search ms-1"></div>
+							</div>
+						</div>
+					</div>
+					<div class="p-1 text-center" id="wordcloud"></div>
+					<div class="p-5 about" id="tag_list"></div>
+					<div class="p-5" id="results"></div>
+				</div>
+
+  <!-- Optional JavaScript; choose one of the two! -->
+
+  <!-- Option 1: Bootstrap Bundle with Popper -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"
-        integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
-        crossorigin="anonymous"></script>
-
-    <!-- Option 2: Separate Popper and Bootstrap JS -->
+		     integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
+				    crossorigin="anonymous"></script>
 
+  <!-- Option 2: Separate Popper and Bootstrap JS -->
     <!-- <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
-        integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp"
-        crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js"
-        integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/"
-        crossorigin="anonymous"></script> -->
-
-</body>
-
-<script>
-    function semantic_search() {
-
-        if ($('#search_query').val() != '') {
-
-            $('#tag_list').empty()
-            $('#wordcloud').empty()
-            $('#results').empty()
-
-            $('#wordcloud').append(`
-            <div class="spinner-border text-primary" role="status">
-                <span class="visually-hidden">Loading...</span>
-            </div>`)
-
-            top_k = parseInt($("#top_k").val())
-            if (isNaN(top_k)) {
-                top_k = 100
-            }
-
-            similarity = parseFloat($("#similarity").val())
-            if (isNaN(similarity)) {
-                similarity = 0.0
-            }
-
-            data = {
-                "query": $("#search_query").val(),
-                "top_k": top_k,
-                "similarity": similarity,
-                "start_date": $("#start_date").val(),
-                "end_date": $("#end_date").val()
-            }
-            data = JSON.stringify(data)
-
-            console.log(data);
-
-            $.ajax({
-                url: "/semantic_search",
-                type: 'post',
-                dataType: 'json', // 預期從server接收的資料型態
-                contentType: 'application/json; charset=utf-8', // 要送到server的資料型態
-                data: data,
-            }).done(function (data) {
-                data = JSON.parse(data['semantic_search'])
-                $('#results').empty()
-                $('#results').append(`<table class="table table-striped table-hover">
-                <thead>
-                    <tr>
-                        <th>title</th>
-                        <th>content_tags</th>
-                        <th>descriptionFilterHtml</th>
-                        <th>masterUnit</th>
-                        <th>startDate</th>
-                        <th>endDate</th>
-                        
-                    </tr>
-                </thead>
-                <tbody>
-                    
-                </tbody>
-            </table>`)
-                $.each(data, function (indexInArray, valueOfElement) {
-                    $('tbody').append(`
-                    <tr>
-                        <td>${valueOfElement.title}</td>
-                        <td><details>
-                                <summary>${valueOfElement.content_tags.slice(0, 10) + '...'}</summary>
-                                <p>${valueOfElement.content_tags}</p>
-                            </details>
-                        </td>
-                        <td><details>
-                                <summary>${valueOfElement.descriptionFilterHtml.slice(0, 50) + '...'}</summary>
-                                <p>${valueOfElement.descriptionFilterHtml}</p>
-                            </details>
-                        </td>
-                        <td>${valueOfElement.masterUnit}</td>
-                        <td>${valueOfElement.startDate}</td>
-                        <td>${valueOfElement.endDate}</td>
-                    </tr>
-                 `)
-                });
-
-                $('table').DataTable({
-                    "order": []
-                });
-
-            }).fail(function () {
-                console.log("error");
-            });
-
-
-
-
-            $.ajax({
-                url: "/wordcloud",
-                type: 'post',
-                dataType: 'json', // 預期從server接收的資料型態
-                contentType: 'application/json; charset=utf-8', // 要送到server的資料型態
-                data: data,
-            }).done(function (data) {
-                data = JSON.parse(data['wordcloud'])
-                $('#wordcloud').empty()
-                $('#wordcloud').append(data)
-
-            }).fail(function () {
-                console.log("error");
-            });
-
-
-            $.ajax({
-                url: "/tag_list",
-                type: 'post',
-                dataType: 'json', // 預期從server接收的資料型態
-                contentType: 'application/json; charset=utf-8', // 要送到server的資料型態
-                data: data,
-            }).done(function (data) {
-                data = JSON.parse(data['tag_list'])
-
-                $('#tag_list').empty()
-                if (data.length != 0) {
-                    $('#tag_list').append(`Top 100 Tags<br>`)
-
-                    $.each(data, function (indexInArray, valueOfElement) {
-                        $('#tag_list').append(`
-                            <span class="badge bg-primary">#${valueOfElement}&nbsp;</span>
-                    `)
-                    });
-                }
-
-            }).fail(function () {
-                console.log("error");
-            });
-        }
-    }
-
-    $('#search').on("click", function () {
-        semantic_search()
-    });
+		              integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp"
+					         crossorigin="anonymous"></script>
+							          <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js"
+									               integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/"
+												          crossorigin="anonymous"></script> -->
+														         <script src="static/main.js"></script>
+	</body>
 
-    $('#search_query').on("keyup", function (event) {
-        // Number 13 is the "Enter" key on the keyboard
-        if (event.keyCode === 13) {
-            // Cancel the default action, if needed
-            event.preventDefault();
-            // Trigger the button element with a click
-            $('#search').click();
-        }
-    });
 
-</script>
+</html>
 
-</html>