100 lines
2.8 KiB
JavaScript
100 lines
2.8 KiB
JavaScript
(function(){
|
|
var articleDatas = null;
|
|
var resultDiv = null;
|
|
new Vue({
|
|
el: "#search-box",
|
|
data: {
|
|
queryText: null,
|
|
searchResult: []
|
|
},
|
|
mounted: function() {
|
|
axios({
|
|
url: "/search.xml"
|
|
}).then(function(response){
|
|
var xmlDoms = null
|
|
if(window.DOMParser) {
|
|
var parser = new DOMParser()
|
|
xmlDoms = parser.parseFromString(response.data, "application/xml")
|
|
} else {
|
|
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
|
|
xmlDoc.async = false;
|
|
xmlDoms = xmlDoc.loadXML(response.data);
|
|
}
|
|
//找出所有文章的标题 正文 URL
|
|
articleDatas = Array.prototype.map.call(xmlDoms.getElementsByTagName("entry"), function(item){
|
|
return {
|
|
title: item.getElementsByTagName("title")[0].innerHTML,
|
|
content: item.getElementsByTagName("content")[0].innerHTML,
|
|
url: item.getElementsByTagName("url")[0].innerHTML,
|
|
}
|
|
})
|
|
resultDiv = document.getElementById("search-result-box")
|
|
});
|
|
},
|
|
watch: {
|
|
queryText: function(newVal, oldVal) {
|
|
this.searchResult.length = 0;
|
|
if(newVal && newVal.trim() && articleDatas) {
|
|
resultDiv.style.display = "block"
|
|
} else {
|
|
resultDiv.style.display = "none"
|
|
return
|
|
}
|
|
var keywords = newVal.trim().toLowerCase().split(/[\s\-]+/);
|
|
var _this = this;
|
|
articleDatas.forEach(function(article){
|
|
var isMatch = true;
|
|
var title = article.title.trim().toLowerCase();
|
|
var content = article.content.trim().replace(/<[^>]+>/g,"").toLowerCase();
|
|
var index_title = -1;
|
|
var index_content = -1;
|
|
var first_occur = -1; //关键字在正文当中第一次出现的位置
|
|
if(title && content) {
|
|
keywords.forEach(function(keyword, i) {
|
|
index_title = title.indexOf(keyword);
|
|
index_content = content.indexOf(keyword);
|
|
if( index_title < 0 && index_content < 0 ){
|
|
isMatch = false;
|
|
} else {
|
|
if (index_content < 0) {
|
|
index_content = 0;
|
|
}
|
|
if (i == 0) {
|
|
first_occur = index_content;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
if (isMatch) {
|
|
var resultItem = {};
|
|
resultItem.url = article.url;
|
|
resultItem.title = article.title;
|
|
if (first_occur >= 0) {
|
|
// cut out characters
|
|
var start = first_occur - 6;
|
|
var end = first_occur + 15;
|
|
if(start < 0){
|
|
start = 0;
|
|
}
|
|
if(start == 0){
|
|
end = 10;
|
|
}
|
|
if(end > content.length){
|
|
end = content.length;
|
|
}
|
|
var matchContent = content.substring(start, end);
|
|
// 高亮关键字
|
|
keywords.forEach(function(keyword){
|
|
var keywordReg = new RegExp(keyword, "gi");
|
|
matchContent = matchContent.replace(keywordReg, "<strong class=\"search-keyword\">"+keyword+"</strong>");
|
|
})
|
|
resultItem.matchContent = matchContent
|
|
}
|
|
_this.searchResult.push(resultItem)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
})
|
|
})()
|