https://liammib.github.io/assets/js/search.js

1$(document).ready(function() {
2    'use strict';
3    var search_field = $('.search-form__field'),
4        search_results = $('.search-results'),
5        toggle_search = $('.toggle-search-button'),
6        close_search = $('.close-search-button'),
7        search_result_template = "\
8          <div class='search-results__item'>\
9            <a class='search-results__item__title' href='{{link}}'>{{title}}</a>\
10            <span class='post__date'>{{pubDate}}</span>\
11          </div>";
12
13    toggle_search.click(function(event) {
14      event.preventDefault();
15      $('.search-form-container').addClass('is-active');
16
17      setTimeout(function() {
18        search_field.focus();
19      }, 500);
20    });
21
22    $('.search-form-container').on('keyup', function(event) {
23      if (event.keyCode == 27) {
24        $('.search-form-container').removeClass('is-active');
25      }
26    });
27
28    $('.close-search-button').click(function() {
29      $('.search-form-container').removeClass('is-active');
30    });
31
32    search_field.ghostHunter({
33      results: search_results,
34      onKeyUp         : true,
35      rss             : base_url + '/feed.xml',
36      zeroResultsInfo : false,
37      info_template   : "<h4 class='heading'>Number of posts found: {{amount}}</h4>",
38      result_template : search_result_template,
39      before: function() {
40        search_results.fadeIn();
41      }
42    });
43
44  });