Site updated: 2021-01-08 14:09:36
This commit is contained in:
Cool-Y
parent
4e30638ae3
commit
081c93f90a
@ -251,42 +251,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -875,323 +843,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -261,42 +261,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -965,323 +933,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -258,42 +258,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -965,323 +933,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -252,42 +252,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -970,323 +938,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -265,42 +265,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -1093,323 +1061,6 @@ Server -------wire----------|
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -254,42 +254,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -942,323 +910,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -252,42 +252,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -951,323 +919,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -252,42 +252,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -959,323 +927,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -266,42 +266,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -987,323 +955,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -271,42 +271,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -1087,323 +1055,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -265,42 +265,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -1008,323 +976,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -272,42 +272,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -1132,323 +1100,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -254,42 +254,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -1051,323 +1019,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -263,42 +263,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -973,323 +941,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -255,42 +255,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -479,7 +447,7 @@
|
||||
|
||||
<hr>
|
||||
<h1 id="0x02-AFL快速入门"><a href="#0x02-AFL快速入门" class="headerlink" title="0x02 AFL快速入门"></a>0x02 <a href="http://lcamtuf.coredump.cx/afl/QuickStartGuide.txt" target="_blank" rel="noopener">AFL快速入门</a></h1><p>1）用<code>make</code>编译AFL。如果构建失败，请参阅docs / INSTALL以获取提示。<br>2）查找或编写一个相当快速和简单的程序，该程序从<strong><em>文件或标准输入</em></strong>中获取数据，以一种有价值的方式处理它，然后干净地退出。如果测试网络服务，请将其修改为在前台运行并从stdin读取。在对使用校验和的格式进行模糊测试时，也要注释掉校验和验证码。<br>遇到故障时，程序必须正常崩溃。注意自定义SIGSEGV或SIGABRT处理程序和后台进程。有关检测非崩溃缺陷的提示，请参阅<code>docs/README</code>中的第11节。<br>3）使用afl-gcc编译要模糊的程序/库。一种常见的方法是：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ CC = /path/to/afl-gcc CXX =/path/to/afl-g++ ./configure --disable-shared</span><br><span class="line">$ make clean all</span><br></pre></td></tr></table></figure></p>
|
||||
<p>如果程序构建失败，请联系 <a href="mailto:afl-users@googlegroups.com" target="_blank" rel="noopener">afl-users@googlegroups.com</a>。<br>4）获取一个对程序有意义的小而有效的输入文件。在模糊详细语法（SQL，HTTP等）时，也要创建字典，如<code>dictionaries/README.dictionaries</code>中所述。<br>5）如果程序从stdin读取，则运行<code>afl-fuzz</code>，如下所示：<br><code>./afl-fuzz -i testcase_dir -o findings_dir -- /path/to/tested/program [... program's cmdline ...]</code><br> 如果程序从文件中获取输入，则可以在程序的命令行中输入@@; AFL会为您放置一个自动生成的文件名。</p>
|
||||
<p>如果程序构建失败，请联系 <a href="mailto:afl-users@googlegroups.com" target="_blank" rel="noopener">afl-users@googlegroups.com</a>。<br>4）获取一个对程序有意义的小而有效的输入文件。在模糊详细语法（SQL，HTTP等）时，也要创建字典，如<code>dictionaries/README.dictionaries</code>中所述。<br>5）如果程序从stdin读取，则运行<code>afl-fuzz</code>，如下所示：<br><code>./afl-fuzz -i testcase_dir -o findings_dir -- /path/to/tested/program [... program's cmdline ...]</code><br> 如果程序从文件中获取输入，则可以在程序的命令行中输入@@; AFL会为您放置一个自动生成的文件名。</p>
|
||||
<p><strong>一些参考文档</strong></p>
|
||||
<blockquote>
|
||||
<p><a href="http://lcamtuf.coredump.cx/afl/README.txt" target="_blank" rel="noopener">docs/README</a> - AFL的一般介绍，<br><a href="https://github.com/mirrorer/afl/blob/master/docs/perf_tips.txt" target="_blank" rel="noopener">docs/perf_tips.txt</a> - 关于如何快速模糊的简单提示，<br><a href="http://lcamtuf.coredump.cx/afl/status_screen.txt" target="_blank" rel="noopener">docs/status_screen.txt</a> - UI中显示的花絮的解释，<br><a href="https://github.com/mirrorer/afl/blob/master/docs/parallel_fuzzing.txt" target="_blank" rel="noopener">docs/parallel_fuzzing.txt</a> - 关于在多个核上运行AFL的建议<br><a href="http://lcamtuf.coredump.cx/afl/demo/" target="_blank" rel="noopener">Generated test cases for common image formats</a> - 生成图像文件测试用例的demo<br><a href="http://lcamtuf.coredump.cx/afl/technical_details.txt" target="_blank" rel="noopener">Technical “whitepaper” for afl-fuzz</a> - 技术白皮书</p>
|
||||
@ -496,10 +464,10 @@
|
||||
</ol>
|
||||
<hr>
|
||||
<h1 id="0x04-AFL-README"><a href="#0x04-AFL-README" class="headerlink" title="0x04 AFL README"></a>0x04 <a href="http://lcamtuf.coredump.cx/afl/README.txt" target="_blank" rel="noopener">AFL README</a></h1><blockquote>
|
||||
<p>Written and maintained by Michal Zalewski <a href="mailto:lcamtuf@google.com" target="_blank" rel="noopener">lcamtuf@google.com</a></p>
|
||||
<p>Written and maintained by Michal Zalewski <a href="mailto:lcamtuf@google.com" target="_blank" rel="noopener">lcamtuf@google.com</a></p>
|
||||
<p> Copyright 2013, 2014, 2015, 2016 Google Inc. All rights reserved.<br> Released under terms and conditions of Apache License, Version 2.0.</p>
|
||||
<p> For new versions and additional information, check out:<br> <a href="http://lcamtuf.coredump.cx/afl/" target="_blank" rel="noopener">http://lcamtuf.coredump.cx/afl/</a></p>
|
||||
<p> To compare notes with other users or get notified about major new features,<br> send a mail to <a href="mailto:afl-users+subscribe@googlegroups.com" target="_blank" rel="noopener">afl-users+subscribe@googlegroups.com</a>.</p>
|
||||
<p> To compare notes with other users or get notified about major new features,<br> send a mail to <a href="mailto:afl-users+subscribe@googlegroups.com" target="_blank" rel="noopener">afl-users+subscribe@googlegroups.com</a>.</p>
|
||||
<p> <strong>See QuickStartGuide.txt if you don’t have time to read this file.</strong></p>
|
||||
</blockquote>
|
||||
<h2 id="1）具有导向性的模糊测试的挑战"><a href="#1）具有导向性的模糊测试的挑战" class="headerlink" title="1）具有导向性的模糊测试的挑战"></a>1）具有导向性的模糊测试的挑战</h2><p>Fuzzing是用于识别真实软件中的安全问题的最强大且经过验证的策略之一;它负责安全关键软件中迄今为止发现的绝大多数远程代码执行和权限提升漏洞。<br>不幸的是，模糊测试也不够有力。盲目的、随机的变异使得它不太可能在测试代码中达到某些代码路径，从而使一些漏洞超出了这种技术的范围。<br>已经有许多尝试来解决这个问题。早期方法之一 - 由Tavis Ormandy开创 - 是一种 <strong>语义库蒸馏（corpus distillation）</strong> 。网上找到的一些大型语料库中往往包含大量的文件，这时就需要对其精简，该方法依赖于覆盖信号从大量高质量的候选文件语料库中选择有趣种子的子集，然后通过传统方式对其进行模糊处理。该方法非常有效，但需要这样的语料库随时可用。正因为如此，<strong>代码覆盖率</strong> 也只是衡量程序执行状态的一个简单化的度量，这种方式并不适合后续引导fuzzing测试的。<br>其他更复杂的研究集中在诸如 <strong>程序流分析（“concoic execution”），符号执行或静态分析</strong> 等技术上。所有这些方法在实验环境中都非常有前景，但在实际应用中往往会遇到可靠性和性能问题 - 部分高价值的程序都有非常复杂的内部状态和执行路径，在这一方面符号执行和concolic技术往往会显得不够健壮（如路径爆炸问题），所以仍然稍逊于传统的fuzzing技术。</p>
|
||||
@ -1246,323 +1214,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -254,42 +254,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -1036,323 +1004,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -270,42 +270,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -1068,323 +1036,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -254,42 +254,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -1051,323 +1019,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -252,42 +252,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -1064,323 +1032,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -254,42 +254,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -947,323 +915,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -252,42 +252,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -995,323 +963,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -252,42 +252,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -1072,323 +1040,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -254,42 +254,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -1333,323 +1301,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -252,42 +252,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -976,323 +944,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -275,42 +275,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -1017,323 +985,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -262,42 +262,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -1162,323 +1130,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -259,42 +259,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -961,323 +929,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
349
about/index.html
349
about/index.html
@ -251,42 +251,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -672,323 +640,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -701,323 +669,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -701,323 +669,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -771,323 +739,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -771,323 +739,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -701,323 +669,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -701,323 +669,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -806,323 +774,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -736,323 +704,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -736,323 +704,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -911,323 +879,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -701,323 +669,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -701,323 +669,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -1020,323 +988,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -985,323 +953,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -701,323 +669,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -701,323 +669,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -771,323 +739,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -771,323 +739,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -1030,323 +998,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -1020,323 +988,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -925,323 +893,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -251,42 +251,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -724,323 +692,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -838,323 +806,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -734,323 +702,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -251,42 +251,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -677,323 +645,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -708,323 +676,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -786,323 +754,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -682,323 +650,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -708,323 +676,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -760,323 +728,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
1
content.json
Normal file
1
content.json
Normal file
File diff suppressed because one or more lines are too long
@ -1943,7 +1943,7 @@ pre .javascript .function {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background: #cb40ff;
|
||||
background: #0d701f;
|
||||
}
|
||||
.links-of-blogroll {
|
||||
font-size: 13px;
|
||||
|
||||
@ -251,42 +251,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -670,323 +638,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
349
index.html
349
index.html
@ -251,42 +251,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -2494,323 +2462,6 @@ CTF-WIKI：https://ctf-wiki.github.io/ct
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -251,42 +251,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -2540,323 +2508,6 @@ WinDbg
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -251,42 +251,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -1933,323 +1901,6 @@ ettercap嗅探智能设备和网关之间的流量sudo ettercap -i ens33 -T -q
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
3533
search.xml
3533
search.xml
File diff suppressed because one or more lines are too long
14
sitemap.xml
14
sitemap.xml
@ -169,13 +169,6 @@
|
||||
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>https://cool-y.github.io/googleacf4df440b4becc4.html</loc>
|
||||
|
||||
<lastmod>2019-04-15T07:35:38.085Z</lastmod>
|
||||
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>https://cool-y.github.io/categories/index.html</loc>
|
||||
|
||||
@ -190,6 +183,13 @@
|
||||
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>https://cool-y.github.io/googleacf4df440b4becc4.html</loc>
|
||||
|
||||
<lastmod>2019-04-15T07:35:38.085Z</lastmod>
|
||||
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>https://cool-y.github.io/baidu_verify_4WtqA1rZRc.html</loc>
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -707,323 +675,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -681,323 +649,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -681,323 +649,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -681,323 +649,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -681,323 +649,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -681,323 +649,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -681,323 +649,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -681,323 +649,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -681,323 +649,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -681,323 +649,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -681,323 +649,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -681,323 +649,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -681,323 +649,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -707,323 +675,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
349
tags/index.html
349
tags/index.html
@ -251,42 +251,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -677,323 +645,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -681,323 +649,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -681,323 +649,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -681,323 +649,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -681,323 +649,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -681,323 +649,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -707,323 +675,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -681,323 +649,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -681,323 +649,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -707,323 +675,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -707,323 +675,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -681,323 +649,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -681,323 +649,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -681,323 +649,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -681,323 +649,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -681,323 +649,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -759,323 +727,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -681,323 +649,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -250,42 +250,10 @@
|
||||
|
||||
|
||||
|
||||
<li class="menu-item menu-item-search">
|
||||
|
||||
<a href="javascript:;" class="popup-trigger">
|
||||
|
||||
|
||||
<i class="menu-item-icon fa fa-search fa-fw"></i> <br>
|
||||
|
||||
搜索
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<div class="site-search">
|
||||
|
||||
<div class="popup search-popup local-search-popup">
|
||||
<div class="local-search-header clearfix">
|
||||
<span class="search-icon">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</span>
|
||||
<div class="local-search-input-wrapper">
|
||||
<input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div id="local-search-result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@ -681,323 +649,6 @@
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Popup Window;
|
||||
var isfetched = false;
|
||||
var isXml = true;
|
||||
// Search DB path;
|
||||
var search_path = "search.xml";
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.xml";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
var path = "/" + search_path;
|
||||
// monitor main search box;
|
||||
|
||||
var onPopupClose = function (e) {
|
||||
$('.popup').hide();
|
||||
$('#local-search-input').val('');
|
||||
$('.search-result-list').remove();
|
||||
$('#no-result').remove();
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
}
|
||||
|
||||
function proceedsearch() {
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
|
||||
.css('overflow', 'hidden');
|
||||
$('.search-popup-overlay').click(onPopupClose);
|
||||
$('.popup').toggle();
|
||||
var $localSearchInput = $('#local-search-input');
|
||||
$localSearchInput.attr("autocapitalize", "none");
|
||||
$localSearchInput.attr("autocorrect", "off");
|
||||
$localSearchInput.focus();
|
||||
}
|
||||
|
||||
// search function;
|
||||
var searchFunc = function(path, search_id, content_id) {
|
||||
'use strict';
|
||||
|
||||
// start loading animation
|
||||
$("body")
|
||||
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
|
||||
'<div id="search-loading-icon">' +
|
||||
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
|
||||
'</div>' +
|
||||
'</div>')
|
||||
.css('overflow', 'hidden');
|
||||
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
|
||||
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function(res) {
|
||||
// get the contents from search data
|
||||
isfetched = true;
|
||||
$('.popup').detach().appendTo('.header-inner');
|
||||
var datas = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
var input = document.getElementById(search_id);
|
||||
var resultContent = document.getElementById(content_id);
|
||||
var inputEventFunction = function() {
|
||||
var searchText = input.value.trim().toLowerCase();
|
||||
var keywords = searchText.split(/[\s\-]+/);
|
||||
if (keywords.length > 1) {
|
||||
keywords.push(searchText);
|
||||
}
|
||||
var resultItems = [];
|
||||
if (searchText.length > 0) {
|
||||
// perform local searching
|
||||
datas.forEach(function(data) {
|
||||
var isMatch = false;
|
||||
var hitCount = 0;
|
||||
var searchTextCount = 0;
|
||||
var title = data.title.trim();
|
||||
var titleInLowerCase = title.toLowerCase();
|
||||
var content = data.content.trim().replace(/<[^>]+>/g,"");
|
||||
var contentInLowerCase = content.toLowerCase();
|
||||
var articleUrl = decodeURIComponent(data.url);
|
||||
var indexOfTitle = [];
|
||||
var indexOfContent = [];
|
||||
// only match articles with not empty titles
|
||||
if(title != '') {
|
||||
keywords.forEach(function(keyword) {
|
||||
function getIndexByWord(word, text, caseSensitive) {
|
||||
var wordLen = word.length;
|
||||
if (wordLen === 0) {
|
||||
return [];
|
||||
}
|
||||
var startPosition = 0, position = [], index = [];
|
||||
if (!caseSensitive) {
|
||||
text = text.toLowerCase();
|
||||
word = word.toLowerCase();
|
||||
}
|
||||
while ((position = text.indexOf(word, startPosition)) > -1) {
|
||||
index.push({position: position, word: word});
|
||||
startPosition = position + wordLen;
|
||||
}
|
||||
return index;
|
||||
}
|
||||
|
||||
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
|
||||
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
|
||||
});
|
||||
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
|
||||
isMatch = true;
|
||||
hitCount = indexOfTitle.length + indexOfContent.length;
|
||||
}
|
||||
}
|
||||
|
||||
// show search results
|
||||
|
||||
if (isMatch) {
|
||||
// sort index by position of keyword
|
||||
|
||||
[indexOfTitle, indexOfContent].forEach(function (index) {
|
||||
index.sort(function (itemLeft, itemRight) {
|
||||
if (itemRight.position !== itemLeft.position) {
|
||||
return itemRight.position - itemLeft.position;
|
||||
} else {
|
||||
return itemLeft.word.length - itemRight.word.length;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// merge hits into slices
|
||||
|
||||
function mergeIntoSlice(text, start, end, index) {
|
||||
var item = index[index.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
var hits = [];
|
||||
var searchTextCountInSlice = 0;
|
||||
while (position + word.length <= end && index.length != 0) {
|
||||
if (word === searchText) {
|
||||
searchTextCountInSlice++;
|
||||
}
|
||||
hits.push({position: position, length: word.length});
|
||||
var wordEnd = position + word.length;
|
||||
|
||||
// move to next position of hit
|
||||
|
||||
index.pop();
|
||||
while (index.length != 0) {
|
||||
item = index[index.length - 1];
|
||||
position = item.position;
|
||||
word = item.word;
|
||||
if (wordEnd > position) {
|
||||
index.pop();
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
searchTextCount += searchTextCountInSlice;
|
||||
return {
|
||||
hits: hits,
|
||||
start: start,
|
||||
end: end,
|
||||
searchTextCount: searchTextCountInSlice
|
||||
};
|
||||
}
|
||||
|
||||
var slicesOfTitle = [];
|
||||
if (indexOfTitle.length != 0) {
|
||||
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
|
||||
}
|
||||
|
||||
var slicesOfContent = [];
|
||||
while (indexOfContent.length != 0) {
|
||||
var item = indexOfContent[indexOfContent.length - 1];
|
||||
var position = item.position;
|
||||
var word = item.word;
|
||||
// cut out 100 characters
|
||||
var start = position - 20;
|
||||
var end = position + 80;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if (end < position + word.length) {
|
||||
end = position + word.length;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
|
||||
}
|
||||
|
||||
// sort slices in content by search text's count and hits' count
|
||||
|
||||
slicesOfContent.sort(function (sliceLeft, sliceRight) {
|
||||
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
|
||||
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
|
||||
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
|
||||
return sliceRight.hits.length - sliceLeft.hits.length;
|
||||
} else {
|
||||
return sliceLeft.start - sliceRight.start;
|
||||
}
|
||||
});
|
||||
|
||||
// select top N slices in content
|
||||
|
||||
var upperBound = parseInt('1');
|
||||
if (upperBound >= 0) {
|
||||
slicesOfContent = slicesOfContent.slice(0, upperBound);
|
||||
}
|
||||
|
||||
// highlight title and content
|
||||
|
||||
function highlightKeyword(text, slice) {
|
||||
var result = '';
|
||||
var prevEnd = slice.start;
|
||||
slice.hits.forEach(function (hit) {
|
||||
result += text.substring(prevEnd, hit.position);
|
||||
var end = hit.position + hit.length;
|
||||
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
|
||||
prevEnd = end;
|
||||
});
|
||||
result += text.substring(prevEnd, slice.end);
|
||||
return result;
|
||||
}
|
||||
|
||||
var resultItem = '';
|
||||
|
||||
if (slicesOfTitle.length != 0) {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
|
||||
} else {
|
||||
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
|
||||
}
|
||||
|
||||
slicesOfContent.forEach(function (slice) {
|
||||
resultItem += "<a href='" + articleUrl + "'>" +
|
||||
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
|
||||
"...</p>" + "</a>";
|
||||
});
|
||||
|
||||
resultItem += "</li>";
|
||||
resultItems.push({
|
||||
item: resultItem,
|
||||
searchTextCount: searchTextCount,
|
||||
hitCount: hitCount,
|
||||
id: resultItems.length
|
||||
});
|
||||
}
|
||||
})
|
||||
};
|
||||
if (keywords.length === 1 && keywords[0] === "") {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
|
||||
} else if (resultItems.length === 0) {
|
||||
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
|
||||
} else {
|
||||
resultItems.sort(function (resultLeft, resultRight) {
|
||||
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
|
||||
return resultRight.searchTextCount - resultLeft.searchTextCount;
|
||||
} else if (resultLeft.hitCount !== resultRight.hitCount) {
|
||||
return resultRight.hitCount - resultLeft.hitCount;
|
||||
} else {
|
||||
return resultRight.id - resultLeft.id;
|
||||
}
|
||||
});
|
||||
var searchResultList = '<ul class=\"search-result-list\">';
|
||||
resultItems.forEach(function (result) {
|
||||
searchResultList += result.item;
|
||||
})
|
||||
searchResultList += "</ul>";
|
||||
resultContent.innerHTML = searchResultList;
|
||||
}
|
||||
}
|
||||
|
||||
if ('auto' === 'auto') {
|
||||
input.addEventListener('input', inputEventFunction);
|
||||
} else {
|
||||
$('.search-icon').click(inputEventFunction);
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
inputEventFunction();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove loading animation
|
||||
$(".local-search-pop-overlay").remove();
|
||||
$('body').css('overflow', '');
|
||||
|
||||
proceedsearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// handle and trigger popup window;
|
||||
$('.popup-trigger').click(function(e) {
|
||||
e.stopPropagation();
|
||||
if (isfetched === false) {
|
||||
searchFunc(path, 'local-search-input', 'local-search-result');
|
||||
} else {
|
||||
proceedsearch();
|
||||
};
|
||||
});
|
||||
|
||||
$('.popup-btn-close').click(onPopupClose);
|
||||
$('.popup').click(function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).on('keyup', function (event) {
|
||||
var shouldDismissSearchPopup = event.which === 27 &&
|
||||
$('.search-popup').is(':visible');
|
||||
if (shouldDismissSearchPopup) {
|
||||
onPopupClose();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user