feat(search):

Author: fabianmoronzirfas

.bin/index.js

@@ -256,12 +256,8 @@ json.forEach(ele => {
 });
 
 // sort categories by name
-// console.log(json[0][0].cat);
 json.sort((a,b)=> a[0].cat.localeCompare(b[0].cat));
-// json.forEach((ele, i) => {
-//   // console.log(ele[i].cat);
-//   ele.sort((a,b) => a.cat.localeCompare(b.cat));
-// })
+
 
 fs.writeFile('./_data/cats-and-subcats.json', JSON.stringify(json, null, 2), (err)=>{
   if(err) {

assets/js/reference.bundle.js

@@ -2,18 +2,24 @@ import List from 'list.js';
 
 
 document.addEventListener('DOMContentLoaded',function() {
-  const searchfield = document.querySelector('input.search');
-  console.log(List);
+  // const searchfield = document.querySelector('input.search');
+  // console.log(List);
   console.log('Vanilla doc ready');
   var options = {
-    valueNames: ['heading-category']
+    valueNames: ['entry-heading-link'],
+    // needs some tweaking
+    location: 0,
+    distance: 100,
+    threshold: 0.4,
+    multiSearch: true
   };
-  const listObj = new List('reference', options);
-  console.log(listObj);
-  if (searchfield!==null) {
-    searchfield.addEventListener('keyup', (event)=>{
-      let txt = searchfield.value;
-      listObj.search(txt);
-    });
-  }
+  const listObj = new List('ref', options);
+
+  // console.log(listObj);
+  // if (searchfield !== null) {
+  //   searchfield.addEventListener('keyup', (event)=>{
+  //     let txt = searchfield.value;
+  //     listObj.search(txt);
+  //   });
+  // }
 });

assets/js/reference.bundle.js.map

@@ -51,6 +51,14 @@
   min-height: 6em;
   margin-top: 0.5em;
 }
+.fuzzy-search, input.fuzzy-search::placeholder {
+  width: 100%;
+  /* height: 2em; */
+  /* font-weight: bold; */
+  font-size: 1.2em;
+  /* color: #9636FC; */
+  font-family:'Times New Roman', Times, serif;
+}
 </style>
 <h1 id="new-cat-index">{{page.title}}</h1>
 
@@ -71,15 +79,11 @@ <h2>Table Of Contents</h2>
 
 </section>
   <!-- End of TOC loops -->
-  <input class="search" placeholder="Search" />
-<!-- class="sort" automagically makes an element a sort buttons. The date-sort value decides what to sort by. -->
-  <button class="sort" data-sort="name">
-    Sort
-  </button>
-<div class="reference">
-  <!-- class="search" automagically makes an input a search field. -->
+  <div class="ref" id="ref">
+    <!-- class="fuzzy-search" automagically makes an input a search field. -->
+      <input class="fuzzy-search" placeholder="Fuzzy Search List.js" />
+        <section class="list">
     {%- for element in site.data.cats-and-subcats %}
-    <!-- <section class="category"> -->
         {%- assign newcat = true -%}
         {%- for ele in element -%}
         {%- if newcat == true -%}
@@ -89,10 +93,9 @@ <h2 class="heading-category" id="{{ele.cat}}">{{ele.cat}}</h2>
         {%- unless ele.subcat == 'null' -%}<h3 id="{{ele.subcat}}">{{ele.cat}}#{{ele.subcat}}</h3>{%- endunless -%}
         <section class="sub-category">
             {%- for entry in ele.entries -%}
-            {%- assign eid = entry.name |downcase -%}
+            {%- assign eid = entry.name | downcase -%}
             <div class="new-entry" id="{{eid}}-ndx">
-              <div class="entry-heading"><a href="/reference/{{ele.cat}}/{{entry.name}}.html">{{entry.codetitle}}</a></div>
-
+              <div class="entry-heading"><a class="entry-heading-link" href="/reference/{{ele.cat}}/{{entry.name}}.html">{{entry.codetitle}}</a></div>
                 {%- if entry.summary != null -%}
                 <p class="summary">{{entry.summary}}</p>
                 {%- else -%}
@@ -108,17 +111,18 @@ <h2 class="heading-category" id="{{ele.cat}}">{{ele.cat}}</h2>
                   </p>
               {%- endif -%}
             </div>
-            {%- endfor -%} <!-- End of sub category loop-->
+            {%- endfor -%} <!-- End of sub entries loop-->
           </section>
           <!-- <hr> -->
-
         {%- endfor -%} <!-- End of category loop-->
-    <!-- </section> -->
-    {%- endfor -%} <!-- End of elements loop-->
+        {%- endfor -%} <!-- End of elements loop-->
+      </section>
 </div>
 
-
-
+<script>
+// const searchstring = 'foo';
+// window.lunrjssearchdata = JSON.parse(searchstring);
+</script>
  {%- comment -%}
  <h2 id="cat-ndx">Categories</h2>
  <div class="index">

assets/js/src/reference.js

@@ -0,0 +1,4 @@
+---
+---
+[{%- for element in site.data.cats-and-subcats -%}{%- for ele in element -%}{%- for entry in ele.entries -%}{%- assign eid = entry.name | downcase -%} { "id":"{{eid}}","codetitle": "{{ entry.codetitle }}","summary":"{%- if entry.summary != null -%}{{ entry.summary | strip_newlines | escape }}{%- else -%}{{ entry.description | truncate: 150, '...' | markdownify | strip_html | strip_newlines | escape }}
+{%- endif -%}" } {%- if forloop.last != true -%},{%-endif-%}{%- endfor -%}{%- if forloop.last != true -%},{%-endif-%}{%- endfor -%}{%- if forloop.last != true -%},{%-endif-%}{%- endfor -%}]