https://onejane.github.io/js/search/local-search.js

1$(function () {
2  var loadFlag = false
3  $('a.social-icon.search').on('click', function () {
4    $('body').css('width', '100%')
5    $('body').css('overflow', 'hidden')
6    $('.search-dialog').velocity('stop')
7      .velocity('transition.expandIn', {
8        duration: 300,
9        complete: function () {
10          $('#local-search-input input').focus()
11        }
12      })
13    $('.search-mask').velocity('stop')
14      .velocity('transition.fadeIn', {
15        duration: 300
16      })
17    if (!loadFlag) {
18      search(GLOBAL_CONFIG.localSearch.path)
19      loadFlag = true
20    }
21
22    // shortcut: ESC
23    document.addEventListener('keydown', function f(event) {
24      if (event.code === 'Escape') {
25        closeSearch()
26        document.removeEventListener('keydown', f)
27      }
28    })
29  })
30
31  var closeSearch = function () {
32    $('body').css('overflow', 'auto')
33    $('.search-dialog').velocity('stop')
34      .velocity('transition.expandOut', {
35        duration: 300
36      })
37    $('.search-mask').velocity('stop')
38      .velocity('transition.fadeOut', {
39        duration: 300
40      })
41  }
42  $('.search-mask, .search-close-button').on('click', closeSearch)
43
44  function search(path) {
45    $.ajax({
46      url: GLOBAL_CONFIG.root + path,
47      dataType: 'xml',
48      success: function (xmlResponse) {
49        // get the contents from search data
50        var datas = $('entry', xmlResponse).map(function () {
51          return {
52            title: $('title', this).text(),
53            content: $('content', this).text(),
54            url: $('url', this).text()
55          }
56        }).get()
57        var $input = $('#local-search-input input')[0]
58        var $resultContent = $('#local-hits')[0]
59        $input.addEventListener('input', function () {
60          var str = '<div class="search-result-list">'
61          var keywords = this.value.trim().toLowerCase().split(/[\s]+/)
62          $resultContent.innerHTML = ''
63          if (this.value.trim().length <= 0) {
64            $('.local-search-stats__hr').hide()
65            return
66          }
67          var count = 0
68          // perform local searching
69          datas.forEach(function (data) {
70            var isMatch = true
71            var dataTitle = data.title.trim().toLowerCase()
72            var dataContent = data.content.trim().replace(/<[^>]+>/g, '').toLowerCase()
73            var dataUrl = data.url
74            var indexTitle = -1
75            var indexContent = -1
76            // only match artiles with not empty titles and contents
77            if (dataTitle !== '' && dataContent !== '') {
78              keywords.forEach(function (keyword, i) {
79                indexTitle = dataTitle.indexOf(keyword)
80                indexContent = dataContent.indexOf(keyword)
81                if (indexTitle < 0 && indexContent < 0) {
82                  isMatch = false
83                } else {
84                  if (indexContent < 0) {
85                    indexContent = 0
86                  }
87                }
88              })
89            }
90            // show search results
91            if (isMatch) {
92              str += '<div class="local-search__hit-item"><a href="' + dataUrl + '" class="search-result-title">' + dataTitle + '</a>' + '</div>'
93              count += 1
94              $('.local-search-stats__hr').show()
95            }
96          })
97          if (count === 0) {
98            str += '<div id="local-search__hits-empty">' + GLOBAL_CONFIG.localSearch.languages.hits_empty.replace(/\$\{query}/, this.value.trim()) +
99              '</div>'
100          }
101          $resultContent.innerHTML = str
102        })
103      }
104    })
105  }
106})