iCulture/static/main.js

function semantic_search() {
  if ($("#search_query").val() != "") {
    $("#tag_list").empty();
    $("#wordcloud").empty();
    $("#results").empty();
    $("#add_keywords").empty();
	$("#add_labels").empty();
	$("#add_names").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("tag list error");
      });

  	$.ajax({
    url: "/add_search",
    type: "post",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
	data: data
  	})
	.done(function(data){
		let max_add = 5
		console.log(data);
		add_data = data["add_keywords"]
		console.log(add_data)
		let contentList = [];
      	let falseCount = 0;
		let len = Math.min(max_add, add_data.length);
		for (i=0; i<len; i++){
	  	$("#add_keywords").append(`
            <button type="button" onclick="addValue('${add_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">${add_data[i]}</p> 
            </div>
            </button>`);
	  
		}
		add_data = data["add_labels"]
		console.log(data)
		contentList = [];
      	falseCount = 0;
		len = Math.min(max_add, add_data.length);
		for (i=0; i<len; i++){
	  	$("#add_labels").append(`
            <button type="button" onclick="addValue('${add_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">${add_data[i]}</p> 
            </div>
            </button>`);
	  
		}
		add_data = data["add_names"]
		console.log(data)
		contentList = [];
      	falseCount = 0;
		len = Math.min(max_add, add_data.length);
		for (i=0; i<len; i++){
	  	$("#add_names").append(`
            <button type="button" onclick="addValue('${add_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">${add_data[i]}</p> 
            </div>
            </button>`);
	  
		}
	})
	.fail(function(){
		console.log("add search 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();
}