https://cl9000.github.io/libs/search/search.js

1
2var searchFunc = function(path, search_id, content_id) {
3    'use strict';
4    $.ajax({
5        url: path,
6        dataType: "xml",
7        success: function(xmlResponse) {
8            // get the contents from search data
9            var datas = $("entry", xmlResponse).map(function() {
10                return {
11                    title: $("title", this).text(),
12                    content: $("content", this).text(),
13                    url: $("id", this).text(),
14                    published: $("published", this).text(),
15                    updated: $("updated", this).text()
16                };
17            }).get();
18            var $input = document.getElementById(search_id);
19            var $resultContent = document.getElementById(content_id);
20            $input.addEventListener('input', function() {
21                var str = '<ul class=\"search-result-list\">';
22                var keywords = this.value.trim().toLowerCase().split(/[\s\-]+/);
23                $resultContent.innerHTML = "";
24                if (this.value.trim().length <= 0) {
25                    return;
26                }
27                // perform local searching
28                datas.forEach(function(data) {
29                    var isMatch = true;
30                    var content_index = [];
31                    var data_title = data.title.trim().toLowerCase();
32                    var data_content = data.content.trim().replace(/<[^>]+>/g, "").toLowerCase();
33                    var data_url = data.url;
34                    var index_title = -1;
35                    var index_content = -1;
36                    var first_occur = -1;
37                    // only match artiles with not empty titles and contents
38                    if (data_title != '' && data_content != '') {
39                        keywords.forEach(function(keyword, i) {
40                            index_title = data_title.indexOf(keyword);
41                            index_content = data_content.indexOf(keyword);
42                            if (index_title < 0 && index_content < 0) {
43                                isMatch = false;
44                            } else {
45                                if (index_content < 0) {
46                                    index_content = 0;
47                                }
48                                if (i == 0) {
49                                    first_occur = index_content;
50                                }
51                            }
52                        });
53                    }
54                    // show search results
55                    if (isMatch) {
56                        str += "<li><a href='" + data_url + "' class='search-result-title' style='font-size: 2.3rem;color:#337ab7'>" + data_title + "</a>";
57                        var content = data.content.trim().replace(/<[^>]+>/g, "");
58                        if (first_occur >= 0) {
59                            // cut out 100 characters
60                            var start = first_occur - 20;
61                            var end = first_occur + 80;
62                            if (start < 0) {
63                                start = 0;
64                            }
65                            if (start == 0) {
66                                end = 100;
67                            }
68                            if (end > content.length) {
69                                end = content.length;
70                            }
71                            var match_content = content.substr(start, end);
72                            // highlight all keywords
73                            keywords.forEach(function(keyword) {
74                                var regS = new RegExp(keyword,"gi");
75                                match_content = match_content.replace(regS, "<em class=\"search-keyword\">" + keyword + "</em>");
76                            });
77                            str += "<p class=\"search-result\" style=\"font-size: 1.5rem;line-height: 2.3rem;margin: 10px 0 20px 0;overflow: hidden;border-bottom: 1px solid #337ab7;padding-bottom: 18px;\">" + match_content + "...</p>"
78                        }
79                        str += "</li>";
80                    }
81                });
82                str += "</ul>";
83                $resultContent.innerHTML = str;
84            });
85        }
86    });
87}