Merge pull request #170 from dynamsoft-docs/preview

update to internal commit 816d5dbd

Author: Jenny-Jiani

_includes/search-input.html

@@ -11,7 +11,12 @@
     </button>
   </div>
   <div class="d-search-result">
-    <div id="hits"></div>
+    <div class="hit-container">
+      <div class="loading" style="display: none;">
+        <div class="lds-ring"><div></div><div></div><div></div><div></div></div>
+      </div>
+      <div id="hits"></div>
+    </div>
     <div class="allResults"><a href="javascript:;" class="orangeLink">See all results ></a></div>
   </div>
 </div>
@@ -20,6 +25,7 @@
   var product = getCurrentUrlProductName(document.URL)
   var lang = getCurrentUrlLang(document.URL, true)
   var isNeedFilter = "{{site.searchNeedFilter}}"
+  var isUserInput = true
 
   const mySearch = instantsearch({
     indexName: '{{site.searchIndexName}}',
@@ -116,9 +122,22 @@
     ]);
   }
 
+  mySearch.on('render', function() {
+    if (mySearch.status === 'loading' || mySearch.status === 'stalled') {
+      $(".hit-container .loading").show()
+    } else {
+      $(".hit-container .loading").hide()
+    }
+  });
+
   mySearch.start();
 
   $('#searchbox').on("keyup", function () {
+    if (e.key== undefined && e.keyCode == undefined && e.code == undefined) {
+      isUserInput = false
+    } else {
+      isUserInput = true
+    }
     let value = $(this).val()
     if (value && value != "") {
       $(".ais-SearchBox-reset").show()
@@ -128,6 +147,10 @@
   })
 
   $('#searchbox').keydown(function (e) {
+    if (e.key== undefined && e.keyCode == undefined && e.code == undefined) {
+      isUserInput = false
+      return
+    }
     if (e.keyCode == 13) {
       let value = $(this).val()
       if (value && value != "") {
@@ -139,6 +162,12 @@
     }
   })
 
+  $('#searchbox').on("input", function(e) {
+    if (!isUserInput) {
+      $("#searchbox").trigger($.Event("keydown", { key: "Enter", keyCode: 13, which: 13 }));
+    }
+  })
+
   $(".ais-SearchBox-reset").on("click", function () {
     $('#searchbox').val("")
     $(".d-search-result").hide()

_layouts/search-layout.html

@@ -88,6 +88,7 @@ <h1 class="h2 fontOswald tc">{{page.h1}}</h1>
   var product = getCurrentUrlProductName(document.URL)
   var lang = getCurrentUrlLang(document.URL, true)
   var isNeedFilter = "{{site.searchNeedFilter}}"
+  var isUserInput = true
 
   const mySearch = instantsearch({
     indexName: '{{indexName}}',
@@ -193,6 +194,11 @@ <h1 class="h2 fontOswald tc">{{page.h1}}</h1>
   const searchButton = document.querySelector('#search-button');
 
   $('#custom-searchbox').on("keyup", function () {
+    if (e.key== undefined && e.keyCode == undefined && e.code == undefined) {
+      isUserInput = false
+    } else {
+      isUserInput = true
+    }
     let value = $(this).val()
     if (value && value != "") {
       $(".ais-SearchBox-reset").show()
@@ -206,11 +212,21 @@ <h1 class="h2 fontOswald tc">{{page.h1}}</h1>
   })
 
   $('#custom-searchbox').keydown(function (e) {
+    if (e.key== undefined && e.keyCode == undefined && e.code == undefined) {
+      isUserInput = false
+      return
+    }
     if (e.keyCode == 13) {
       mySearch.helper.setQuery($("#custom-searchbox").val()).search();
     }
   })
 
+  $('#custom-searchbox').on("input", function(e) {
+    if (!isUserInput) {
+      $("#searchbox").trigger($.Event("keydown", { key: "Enter", keyCode: 13, which: 13 }));
+    }
+  })
+
   $(".ais-SearchBox-reset").on("click", function () {
     $('#custom-searchbox').val("")
     $("#search-button").click()