Rivets + Fuse search

search.html

<div class="js-course-search">

  <input type="search" placeholder="Search courses..." rv-on-keyup="search.update" autofocus>

  <ul>
    <li rv-each-result="search.results">
      <a rv-href="result.url">
        {result.name}
      </a>
    </li>
  </ul>
  
</div>

search.js

/* globals $, Fuse, rivets */
/* jshint node:true */

'use strict';


/**
 * Search courses
 * Uses Rivets for data-binding, and Fuse for filtering the search
 */
var Search = {
  courses: null, // Fuse searches this
  url: '/results/courses-detailed',
  fuse: new Fuse(),
  template: $('.js-course-search'),
  fuseOptions: {
    keys: ['categories', 'name']
  },
  results: [], // will be equal to fuse.search(value)

  init: function() {
    var _self = this;

    $.get(_self.url)
      .success(function (data) {
        _self.courses = JSON.parse(data);
        _self.fuse = new Fuse(_self.courses, _self.fuseOptions); // Initialize with all courses
        _self.bindUI();
    });
  },

  // Bound in HTML with rv- event attribute
  update: function () {
    Search.results = Search.fuse.search(this.value);
  },

  bindUI: function () {
    var _self = this;

    rivets.bind(_self.template, {
      'search': _self
    });
  }
};

if (Search.template.length) {
  Search.init();
}