https://wenjing233.github.io/js/search.js

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