Add Search Function

Add several file for search function and edit the index to have a search bar

assets/js/search.js

@@ -0,0 +1,61 @@
+(function() {
+  function displaySearchResults(results, store) {
+    var searchResults = document.getElementById('search-results');
+
+    if (results.length) { // Are there any results?
+      var appendString = '';
+
+      for (var i = 0; i < results.length; i++) {  // Iterate over the results
+        var item = store[results[i].ref];
+        appendString += '<li><a href="' + item.url + '"><h3>' + item.title + '</h3></a>';
+        appendString += '<p>' + item.content.substring(0, 150) + '...</p></li>';
+      }
+
+      searchResults.innerHTML = appendString;
+    } else {
+      searchResults.innerHTML = '<li>No results found</li>';
+    }
+  }
+
+  function getQueryVariable(variable) {
+    var query = window.location.search.substring(1);
+    var vars = query.split('&');
+
+    for (var i = 0; i < vars.length; i++) {
+      var pair = vars[i].split('=');
+
+      if (pair[0] === variable) {
+        return decodeURIComponent(pair[1].replace(/\+/g, '%20'));
+      }
+    }
+  }
+
+  var searchTerm = getQueryVariable('query');
+
+  if (searchTerm) {
+    document.getElementById('search-box').setAttribute("value", searchTerm);
+
+    // Initalize lunr with the fields it will be searching on. I've given title
+    // a boost of 10 to indicate matches on this field are more important.
+    var idx = lunr(function () {
+      this.field('id');
+      this.field('title', { boost: 10 });
+      this.field('author');
+      this.field('category');
+      this.field('content');
+    });
+
+    for (var key in window.store) { // Add the data to lunr
+      idx.add({
+        'id': key,
+        'title': window.store[key].title,
+        'author': window.store[key].author,
+        'category': window.store[key].category,
+        'content': window.store[key].content
+      });
+
+      var results = idx.search(searchTerm); // Get lunr to perform a search
+      displaySearchResults(results, window.store); // We'll write this in the next section
+    }
+  }
+})();

index.html

@@ -3,15 +3,25 @@
 title: Jekyll Themes
 ---
 
+<div class="row-fluid">
+  <div class="col-lg-12 text-center">
+    <div class="form-group">
+      <form action="/search/" method="get">
+        <input type="text" id="search_box" placeholder="Search..." name="query" class="form-control" style="width:100%">
+      </form>
+    </div>
+  </div>
+</div>
+
 <div class="gallery">
-	{% for post in paginator.posts %}
-		<div class="item">
-			<a class="item-inner" href="{{ post.url }}">
-				<div class="item-image"><img src="/thumbnails/{{ post.thumbnail }}"></div>
-				<div class="item-name">{{ post.title }}</div>
-			</a>
-		</div>
-	{% endfor %}
+  {% for post in paginator.posts %}
+  <div class="item">
+    <a class="item-inner" href="{{ post.url }}">
+      <div class="item-image"><img src="/thumbnails/{{ post.thumbnail }}"></div>
+      <div class="item-name">{{ post.title }}</div>
+    </a>
+  </div>
+  {% endfor %}
 </div>
 
 <!-- Pager -->
@@ -56,4 +66,3 @@
     </div>
   </div>
 </div>
-

search.html

@@ -0,0 +1,37 @@
+---
+layout: default
+title: Jekyll Themes | Search Page
+---
+
+<div class="main">
+  <div class="section section-basic">
+    <div class="container">
+
+      <div class="search">
+              <form action="/search/" method="get">
+                <input type="text" id="search-box" placeholder="Search..." name="query" class="form-control" style="width:100%">
+              </form>
+
+        <ul id="search-results"></ul>
+
+        <script>
+          window.store = {
+            {% for post in site.posts %}
+              "{{ post.url | slugify }}": {
+                "title": "{{ post.title | xml_escape }}",
+                "author": "{{ post.author | xml_escape }}",
+                "category": "{{ post.category | xml_escape }}",
+                "content": {{ post.content | strip_html | strip_newlines | jsonify }},
+                "url": "{{ post.url | xml_escape }}"
+              }
+              {% unless forloop.last %},{% endunless %}
+            {% endfor %}
+          };
+        </script>
+        <script src="/assets/js/lunr.min.js"></script>
+        <script src="/assets/js/search.js"></script>
+      </div>
+
+    </div>
+  </div>
+</div>