full-text search using listjs

_includes/lesson-index.html

@@ -24,6 +24,7 @@
 <!--
 this div ('lesson-list', referenced in lessonfilter.js) needs to contain the sort button/elements AND the actual list for the sort buttons to work
 -->
+<input id="search" type="text" placeholder="Search lessons...">
 <div id="lesson-list">
 
 <!--
@@ -40,6 +41,7 @@
 
   <input id="date-sort-text" type="hidden" label="{{site.data.snippets.date[page.lang]}}">
   <input id="difficulty-sort-text" type="hidden" label="{{site.data.snippets.difficulty[page.lang]}}">
+
 
   <h2 class="results-title">{{ site.data.snippets.filtering-results[page.lang] }}: <span id="results-value">{{ site.data.snippets.all-lessons[page.lang] }} </span> <span id="current-sort" class="sort-desc">{{site.data.snippets.date[page.lang]}}</span></h2>
 

_includes/lesson_describe.html

@@ -32,5 +32,6 @@ <h3 class="above-title">{{ include.authors }}</h3>
   <span class="topics">{{ lesson.topics | join: ' '}}</span>
   <span class="date">{% if lesson.translation_date %}{{ lesson.translation_date }}{% else %}{{ lesson.date }}{% endif %}</span>
   <span class="difficulty">{{ lesson.difficulty }}</span>
+  <span id="{{lesson.title}}-content" class="content" style="display: none;">{{ lesson.content | markdownify | strip_html }}</span>
 
 </div>

css/style.css

@@ -315,6 +315,25 @@ Lessons Index
     background-color:#ededed;
   }
 
+  /*****************
+    SEARCH
+  *****************/
+
+  #search {
+    width:99.5%;
+    clear:both;
+    margin-bottom:1rem;
+    background-color:#fefefe;
+    color:#666;
+    border:1px solid #999;
+    font: .9rem/1.1rem 'Open Sans',
+    sans-serif;
+    padding: .4rem .6rem;
+    border-radius: 3px;
+    display:inline-block;
+    text-transform:uppercase;
+    text-decoration: none;
+  }
 
   /*****************
     SORT BUTTONS

js/lessonfilter.js

@@ -60,13 +60,20 @@ function wireButtons() {
   console.log(uri.toString());
 
   var options = {
-    valueNames: [ 'date', 'title', 'difficulty', 'activity', 'topics' ]
+    valueNames: [ 'date', 'title', 'difficulty', 'activity', 'topics','abstract', 'content' ]
   };
 
   var featureList = new List('lesson-list', options);
   // We need a stateObj for adjusting the URIs on button clicks, but the value is moot for now; could be useful for future functionality.
   var stateObj = { foo: "bar" };
 
+  // Filter lessons on search
+  $('#search').on('keyup', function () {
+    var searchString = $(this).val();
+    featureList.search(searchString, ['content']);
+    // featureList.fuzzySearch(searchString, ['content']); // List.js has a fuzzy search method but I get fewer results with it than the regular search method. We could create are own fuzzy search function here and then use List.js filtering instead of search.
+  });
+
   // When a filter button is clicked
   $('.filter').children().click(function() {
       // Set clicked button as current