search (#794)

JohnSnowLabs · Nov 29, 2023 · 4781e3c · 4781e3c
1 parent 66af8b1
commit 4781e3c
Show file tree

Hide file tree

Showing 15 changed files with 175 additions and 799 deletions.
diff --git a/docs/_data/navigation.yml b/docs/_data/navigation.yml
@@ -13,6 +13,8 @@ header:
   - title: Demo
     url: /demos
     key: demo
+  - title: '<span style="color: #FF8A00;"><i class = "fas fa-search fa-2x"></i></span>'
+    url: /search
   - title: '<span style="color: #FF8A00;"><i class = "fab fa-github fa-2x"></i></span>'
     url: https://github.com/JohnSnowLabs/spark-nlp
   - title: '<span style="color: #FF8A00;"><i class="fab fa-slack-hash fa-2x"></i></span>'

diff --git a/docs/_includes/article-header.html b/docs/_includes/article-header.html
@@ -1,6 +1,6 @@
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <script>
-  {% include scripts/search/simple-jekyll-search.min.js %}
+  {% include scripts/search/search.js %}
 </script>
 {%- include snippets/get-article-title.html article=include.article-%}
 {%- assign _article_title = __return -%}
@@ -45,33 +45,14 @@
       {%- endif -%}
       {%- if _show_nav -%}
         <div class="header-nav">{%- include article-nav.html article=page -%}</div>
-      {%- endif -%}
-
-      {%- if page.layout == "docs" -%}
-        <div class="main-docs">
-          <div class="search-wrapper">
-            <!-- HTML elements for search -->
-            <input type="text" id="search-input" placeholder="Search...">
-            <ul id="results-container" class="shadow results-container"></ul>
-          </div>
-        </div> 
-      {%- endif -%}     
+      {%- endif -%}  
 
       {%- if _show_title -%}
         <header class="main-docs {{ _subtitle_class }}">
           <h1>{{ _article_title }}</h1>
           {%- if _show_subtitle -%}
           <div class="top-subtitle mont">{{ _article_subtitle }}</div>
-          {%- endif -%}
-          {%- if page.layout == "topdemos" or page.layout == "demopagenew" -%}
-            <div class="main-docs">
-              <div class="search-wrapper">
-                <!-- HTML elements for search -->
-                <input type="text" id="search-input" placeholder="Search...">
-                <ul id="results-container" class="shadow results-container"></ul>
-              </div>
-            </div> 
-          {%- endif -%}  
+          {%- endif -%} 
         </header>
       {%- endif -%}
       {%- if _show_edit_on_github -%}

diff --git a/docs/_includes/scripts/custom.js b/docs/_includes/scripts/custom.js
@@ -204,14 +204,3 @@ const demomenu = document.querySelector('.demomenu'),
 if(demomenu === null) {
   asideButton.classList.add('hide_aside');
 }
-
-
-var sjs = SimpleJekyllSearch({
-  searchInput: document.getElementById('search-input'),
-  resultsContainer: document.getElementById('results-container'),
-  noResultsText: "<em>No results found.</em>",
-  json: '/search.json',
-  limit: 100,
-  searchResultTemplate: '<li><a href="{{ site.url }}{url}">{demopage}{title}<span>{seotitle}</span></a></li>'
-})
-
diff --git a/docs/_includes/scripts/search/search.js b/docs/_includes/scripts/search/search.js
@@ -0,0 +1,87 @@
+/*!
+  * Search
+  * Licensed under the MIT License.
+  */
+
+
+'use strict'
+
+function fetchAndPopulate() {
+  // Fetch JSON data
+  fetch('search.json')
+      .then(response => response.json())
+      .then(data => {
+          // Process the JSON data
+          populateHTML(data);
+          // Now that data is loaded, add input event listener for searching
+          document.getElementById('search-input').addEventListener('input', search);
+      })
+      .catch(error => console.error('Error fetching JSON:', error));
+}
+
+
+
+function populateHTML(data) {
+  // Iterate through the data and create HTML elements
+  const container = document.getElementById('results-container');
+  container.innerHTML = ''; // Clear previous content
+
+  data.forEach(item => {
+      const element = document.createElement('li');
+      element.innerHTML = `${item.demopage}<a href="${item.url}">${item.title}</a><div class="sr_seotitle">${item.seotitle}</div><em>${item.content}</em>`;
+      container.appendChild(element);
+  });
+}
+
+
+
+function search() {
+  const searchTerm = document.getElementById('search-input').value.toLowerCase(),
+        resultsContainer = document.getElementById('results-container'),
+        itemsTitle = document.querySelectorAll('#results-container a'), 
+        itemsContent = document.querySelectorAll('#results-container em'), 
+        items = document.querySelectorAll('#results-container li'); 
+
+        if(searchTerm.length > 3) {
+          itemsTitle.forEach(item => {
+            wrapWordInSpan(item, searchTerm);
+          });
+
+          itemsContent.forEach(item => {
+            wrapWordInSpan(item, searchTerm);
+          });
+        }
+
+      items.forEach(item => {
+
+      const text = item.innerText.toLowerCase();
+
+      if (text.includes(searchTerm) && searchTerm.length > 3) {        
+          resultsContainer.style.display = 'block';
+          item.style.display = 'block';
+      } else {
+          item.style.display = 'none';
+      }
+      if (searchTerm == "" || searchTerm == null) {
+        resultsContainer.style.display = 'none';
+    }
+  });
+
+
+}
+
+function wrapWordInSpan(data, wordToWrap) {
+
+  var dataText = data.textContent;
+
+  var regex = new RegExp('(' + wordToWrap.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + ')', 'gi');
+
+
+  var newText = dataText.replace(regex, '<span class="hightitle">$1</span>');
+
+  // Замена содержимого элемента с новым текстом
+  return data.innerHTML = newText;
+}
+
+
+
diff --git a/docs/_includes/scripts/search/simple-jekyll-search.min.js b/docs/_includes/scripts/search/simple-jekyll-search.min.js
diff --git a/docs/_layouts/article.html b/docs/_layouts/article.html
@@ -23,11 +23,6 @@
   </div>
 
 </div>
-<div class="dn">
-  <!-- HTML elements for search -->
-  <input type="text" id="search-input" placeholder="Search...">
-  <ul id="results-container" class="shadow results-container"></ul>
-</div> 
 
 <script>
   {%- include scripts/article.js -%}

diff --git a/docs/_layouts/models.html b/docs/_layouts/models.html
@@ -2,7 +2,6 @@
 layout: base
 ---
 <script>
-  {% include scripts/search/simple-jekyll-search.min.js %}
 </script>
 <div class="layout--page js-page-root">
   <div class="page__main js-page-main page__viewport full-width cell cell--auto">
@@ -56,11 +55,6 @@ <h1>Spark NLP Models Hub</h1>
             </div>
           </div>
         </div>
-        <div class="dn">
-          <!-- HTML elements for search -->
-          <input type="text" id="search-input" placeholder="Search...">
-          <ul id="results-container" class="shadow results-container"></ul>
-        </div> 
         <div class="grid grid--reverse">
           <div class="col-aside d-print-none js-col-aside"></div>
           <div class="col-main cell cell--auto">

diff --git a/docs/_layouts/nlp_products.html b/docs/_layouts/nlp_products.html
@@ -3,9 +3,6 @@
 ---
 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
-<script>
-  {% include scripts/search/simple-jekyll-search.min.js %}
-</script>
 <div class="layout--page js-page-root">
   <div class="page__main js-page-main page__viewport full-width cell cell--auto">
     <div class="page__main-inner">
@@ -56,11 +53,6 @@
 
             </div>
         </div>
-        <div class="dn">
-          <!-- HTML elements for search -->
-          <input type="text" id="search-input" placeholder="Search...">
-          <ul id="results-container" class="shadow results-container"></ul>
-        </div> 
       <div class="page__footer d-print-none">{%- include footer.html -%}</div>
     </div>
   </div>

diff --git a/docs/_layouts/page.html b/docs/_layouts/page.html
@@ -174,11 +174,6 @@
                         {%- endfor -%}
                       </ul>
                     {%- endif -%}
-                    <div class="search-wrapper">
-                      <!-- HTML elements for search -->
-                      <input type="text" id="search-input" placeholder="Search...">
-                      <ul id="results-container" class="shadow results-container"></ul>
-                    </div>
                   {%- if _full_width == false -%}
                     </div>
                   {%- endif -%}