完成站内搜索页面模板

quericy · Jun 28, 2016 · fa08470 · fa08470
1 parent d8bc62d
commit fa08470
Showing 1 changed file with 118 additions and 42 deletions.
diff --git a/layout/search.ejs b/layout/search.ejs
@@ -1,44 +1,120 @@
-<%
-    var lastYear;
-    var lastMonth;
-%>
-<div id="archives" class="main-content-wrap">
-    <form id="filter-form" action="#">
-        <input name="date" type="text" class="form-control input--xlarge" placeholder="<%= __('global.search_date') %>" autofocus="autofocus">
-    </form>
-    <h5 class="archive-result text-color-base text-xlarge"
-        data-message-zero="<%= __('global.posts_found.zero') %>"
-        data-message-one="<%= __('global.posts_found.one') %>"
-        data-message-other="<%= __('global.posts_found.other') %>"></h5>
-    <section class="boxes">
-        <% site.posts.sort('date', 'desc').each(function(post) { %>
-            <% var currentYear = post.date.year(); %>
-            <% var currentMonth = post.date.format('MM'); %>
-            <% if (lastYear != currentYear) { %>
-                <% if (lastYear != null) { %>
-                    </div>
-                    <% lastMonth = null; %>
-                <% } %>
-                <% lastYear = currentYear; %>
-                <div class="archive archive-year box" data-date="<%= post.date.year() %>">
-                    <h4 class="archive-title">
-                        <a class="link-unstyled" href="<%- url_for(config.archive_dir + '/' + currentYear) %>"><%= currentYear %></a>
-                    </h4>
-            <% } %>
-            <% if (lastMonth != currentMonth) { %>
-                <% if (lastMonth != null) { %>
-                    </ul>
-                <% } %>
-                <ul class="archive-posts archive-month" data-date="<%= post.date.format('YYYYMM') %>">
-                    <h5 class="archive-title">
-                        <a class="link-unstyled" href="<%- url_for(config.archive_dir + '/' + post.date.format('YYYY/MM')) %>"><%= post.date.format('MMMM') %></a>
-                    </h5>
-                <% lastMonth = currentMonth; %>
-            <% } %>
-            <li class="archive-post archive-day" data-date="<%= post.date.format('YYYYMMDD') %>">
-                <a class="archive-post-title" href="<%- url_for(post.path) %>"><%= post.title || '(' + __('post.no_title') + ')' %></a>
-                <span class="archive-post-date"><%= ' - ' + post.date.locale(page.lang).format(__('date_format')).toLowerCase() %></span>
-            </li>
-        <% }) %>
+<div class="main-content-wrap">
+    <input id="local-search-input" name="date" type="text" class="form-control input--xlarge" placeholder="请输入搜索内容" autofocus="autofocus" autocomplete="off" autocorrect="off" >
+    <div id="result-tip" style="display:none;">
+    <h5 class="text-color-base text-xlarge">
+        搜索结果: &nbsp;&nbsp;
+        <a href="javascript:void(0)"  onclick="resetSearch()"><i id="clear-btn" class="fa fa-times" style="cursor:pointer;"></i>清空</a>
+    </h5>
+    </div>
+    <hr>
+    <section id="local-search-result" class="boxes">
+
     </section>
 </div>
+<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
+<script type="text/javascript">
+var searchFunc = function(path, search_id, content_id) {
+    $.ajax({
+        url: path,
+        dataType: "xml",
+        success: function( xmlResponse ) {
+            // get the contents from search data
+            var datas = $( "entry", xmlResponse ).map(function() {
+                return {
+                    title: $( "title", this).text(),
+                    content: $("content",this).text(),
+                    url: $( "url" , this).text()
+                };
+            }).get();
+            var input = document.getElementById(search_id);
+            var resultContent = document.getElementById(content_id);
+            input.addEventListener('input', function(){
+                resultTip.show();
+                var str='<ul class=\"search-result-list\">';                
+                var keywords = this.value.trim().toLowerCase().split(/[\s\-]+/);
+                resultContent.innerHTML = "";
+                // no input
+                if (this.value.trim().length <= 0) {
+                    resultTip.hide();
+                    return;
+                }
+                // perform local searching
+                datas.forEach(function(data) {
+                    var isMatch = true;
+                    var content_index = [];
+                    var data_title = data.title.trim().toLowerCase();
+                    var data_content = data.content.trim().replace(/<[^>]+>/g,"").toLowerCase();
+                    var data_url = data.url;
+                    var index_title = -1;
+                    var index_content = -1;
+                    var first_occur = -1;
+                    // only match artiles with not empty titles and contents
+                    if(data_title != '' && data_content != '') {
+                        keywords.forEach(function(keyword, i) {
+                            index_title = data_title.indexOf(keyword);
+                            index_content = data_content.indexOf(keyword);
+                            if( index_title < 0 && index_content < 0 ){
+                                isMatch = false;
+                            } else {
+                                if (index_content < 0) {
+                                    index_content = 0;
+                                }
+                                if (i == 0) {
+                                    first_occur = index_content;
+                                }
+                            }
+                        });
+                    }
+                    // show search results
+                    if (isMatch) {
+                        str += "<li><a href='"+ data_url +"' class='search-result-title' target='_blank' style='font-weight: bold;'>" + data_title +"</a>";
+                        var content = data.content.trim().replace(/<[^>]+>/g,"");
+                        if (first_occur >= 0) {
+                            // cut out characters
+                            var start = first_occur - 6;
+                            var end = first_occur + 6;
+                            if(start < 0){
+                                start = 0;
+                            }
+                            if(start == 0){
+                                end = 10;
+                            }
+                            if(end > content.length){
+                                end = content.length;
+                            }
+                            var match_content = content.substr(start, end); 
+                            // highlight all keywords
+                            keywords.forEach(function(keyword){
+                                var regS = new RegExp(keyword, "gi");
+                                match_content = match_content.replace(regS, "<span style='background-color: #FDECEA;'>"+keyword+"</span>");
+                            })
+                            str += "<p class=\"search-result\">" + match_content +"...</p>"
+                        }
+                        str += "</li>";
+                    }
+                });
+                if(str == '<ul class="search-result-list">'){
+                    str += "没有找到匹配的结果";
+                }
+                str += "</ul>";
+                resultContent.innerHTML = str;                
+            })
+        }
+    })
+}
+
+//get data
+var path = "/search.xml";
+searchFunc(path, 'local-search-input', 'local-search-result');
+
+//clear search
+var resultArea = $("#local-search-result");
+var inputArea = $("#local-search-input");
+var resultTip = $("#result-tip");
+
+resetSearch = function(){
+    resultArea.html("");    
+    inputArea.val("");
+    resultTip.hide();
+}
+</script>