You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
104 lines
4.9 KiB
104 lines
4.9 KiB
3 years ago
|
<!-- 搜索遮罩框 -->
|
||
|
|
<div id="searchModal" class="modal">
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="search-header">
|
||
|
|
<span class="title"><i class="fas fa-search"></i> <%= __('search') %></span>
|
||
|
|
<input type="search" id="searchInput" name="s" placeholder="<%= __('searchTip') %>"
|
||
|
|
class="search-input">
|
||
|
|
</div>
|
||
|
|
<div id="searchResult"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
$(function () {
|
||
|
|
var searchFunc = function (path, search_id, content_id) {
|
||
|
|
'use strict';
|
||
|
|
$.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 () {
|
||
|
|
var str = '<ul class=\"search-result-list\">';
|
||
|
|
var keywords = this.value.trim().toLowerCase().split(/[\s\-]+/);
|
||
|
|
$resultContent.innerHTML = "";
|
||
|
|
if (this.value.trim().length <= 0) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
// perform local searching
|
||
|
|
datas.forEach(function (data) {
|
||
|
|
var isMatch = true;
|
||
|
|
var data_title = data.title.trim().toLowerCase();
|
||
|
|
var data_content = data.content.trim().replace(/<[^>]+>/g, "").toLowerCase();
|
||
|
|
var data_url = data.url;
|
||
|
|
data_url = data_url.indexOf('/') === 0 ? 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'>" + data_title + "</a>";
|
||
|
|
var content = data.content.trim().replace(/<[^>]+>/g, "");
|
||
|
|
if (first_occur >= 0) {
|
||
|
|
// cut out 100 characters
|
||
|
|
var start = first_occur - 20;
|
||
|
|
var end = first_occur + 80;
|
||
|
|
if (start < 0) {
|
||
|
|
start = 0;
|
||
|
|
}
|
||
|
|
if (start === 0) {
|
||
|
|
end = 100;
|
||
|
|
}
|
||
|
|
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, "<em class=\"search-keyword\">" + keyword + "</em>");
|
||
|
|
});
|
||
|
|
|
||
|
|
str += "<p class=\"search-result\">" + match_content + "...</p>"
|
||
|
|
}
|
||
|
|
str += "</li>";
|
||
|
|
}
|
||
|
|
});
|
||
|
|
str += "</ul>";
|
||
|
|
$resultContent.innerHTML = str;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
searchFunc('<%- url_for('/search.xml') %>', 'searchInput', 'searchResult');
|
||
|
|
});
|
||
|
|
</script>
|