livesearch.js

//= require jquery
//= require lodash

$(function() {
  var input = $('#searchInput'),
      loader = $('#loader'),
      searchInputTarget = $('#searchTarget'),
      value = input.val();

  if (!input.length)
    return null; // did not find a searchInput, do nothing.

  var latestSearchRequest; // We'll ignore responses which aren't to the most recent request

  function inputChange() {
    if (value != input.val()) { // input has changed
      value = input.val();
      history.pushState(
        {},
        "search for " + encodeURIComponent(value), // title
        "?q=" + encodeURIComponent(value)
      );
      searchInputTarget.empty();
      loader.show();

      var req = $.get(
        input.data('url') + "?term=" + encodeURIComponent(value) // should probably use this URL for replaceState too
      )
      latestSearchRequest = req;

      req.then(function gotSearchResults(data) {
        if (req === latestSearchRequest) {
          loader.hide();
          searchInputTarget.html(data)
        }
      })
    }
  }

  input.on(
    'propertychange change click keyup input paste',
    _.debounce(inputChange, 250)
  )
})