Skip to content

Commit 2637e02

Browse files
jaywcjlovejaywcjlove
committed
搜索列表展示，搜索结果展示优化
1 parent 67c4d03 commit 2637e02

5 files changed

Lines changed: 57 additions & 90 deletions

File tree

‎build/compile.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -135,12 +135,12 @@ function ReadTmpToHTML(from_path,to_path,md_path,des_json){
135135
var tmp_str = fs.readFileSync(tmp_path);
136136
tmp_str = tmp_str.toString();
137137

138-
var relative_path = '',current_path='';
138+
var relative_path = '';
139+
var current_path = to_path.replace(/^\/\.deploy/,'');
139140
if(md_path){
140141
//CSS/JS 引用相对地址
141142
relative_path = path.relative(md_path.toString(),'/');
142143
relative_path = relative_path.replace(/\.\.$/,'');
143-
current_path = md_path.replace(/\.md$/,'.html').replace(/^\/command\//,'/c/');
144144
}
145145
// 生成 HTML
146146
var html = ejs.render(tmp_str,{

‎template/js/index.js‎

Lines changed: 40 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
this.elm_btn = $$('search_btn');
77
this.elm_info = $$('commands_info');
88
this.elm_result = $$('result');
9+
this.elm_search_result = $$('search_list_result');
910

1011
// 获取根路径
1112
this.root_path = (function(){
@@ -15,7 +16,8 @@
1516
})();
1617

1718
this.query = ''; //
18-
this.page_size = 10; //每页显示10条
19+
this.query_size = 5; //搜索框结果显示5条
20+
this.page_size = 20; //每页显示20条
1921

2022
this.elm_info.innerHTML = this.commands.length;
2123

@@ -69,41 +71,48 @@
6971
return typeof returns === "undefined" ? "" : returns;
7072
})
7173
},
72-
createKeyworldsHTML:function(json,keywolds){
74+
createKeyworldsHTML:function(json,keywolds,islist){
7375
var name = json.n,des = json.d,self = this,
74-
reg = new RegExp("("+keywolds+")","ig");
76+
reg = new RegExp("("+keywolds+")","ig"),
77+
str = '';
7578
if(keywolds){
7679
name = json.n.replace(reg,'<i class="kw">'+"$1"+"</i>");
7780
des = json.d.replace(reg,'<i class="kw">'+"$1"+"</i>") || '';
7881
}
7982

80-
return this.simple('<a href="'+this.root_path+'/c$url$.html"><strong>$name$</strong> - $des$</a>',{
83+
str = islist ? '<a href="'+this.root_path+'/c$url$.html"><strong>$name$</strong> - $des$</a><p></p>' : '<a href="'+this.root_path+'/c$url$.html"><strong>$name$</strong> - $des$</a>';
84+
return this.simple(str,{
8185
name:name,
8286
url:json.p,
8387
des:des
84-
})
85-
88+
});
8689
},
87-
createListHTML:function(){
88-
var arr = this.commands,self = this,page_size = this.page_size,i=0;
90+
searchResult:function(islist){
91+
var arr = this.commands,self = this,i=0,
92+
page_size = islist?this.page_size:this.query_size,
93+
arrResultHTML = [];
8994
if(arr&&arr.length&&toString.call(arr).indexOf('Array')>-1){
90-
self.elm_result.innerHTML='';
91-
var relese = 0;
9295
for (; i < page_size; i++) {
9396
if(!arr[i]) break;
94-
var myLi = document.createElement("LI");
95-
if(self.isSreachIndexOF(arr[i].n,self.query)
96-
|| self.isSreachIndexOF(arr[i].d,self.query)
97+
if(self.isSreachIndexOF(arr[i].n,self.query)
98+
|| self.isSreachIndexOF(arr[i].d,self.query)
9799
){
98-
relese += 1
99-
myLi.innerHTML = self.createKeyworldsHTML(arr[i],self.query)
100-
self.elm_result.appendChild(myLi);
100+
arrResultHTML.push(self.createKeyworldsHTML(arr[i],self.query,islist));
101101
}
102102
}
103-
if(relese ===0){
104-
myLi.innerHTML = this.query?'<span>没有搜索到任何内容，请尝试输入其它字符！</span>':'<span>请尝试输入一些字符，进行搜素！</span>';
105-
self.elm_result.innerHTML = myLi.outerHTML;
106-
}
103+
}
104+
105+
var elm = islist?this.elm_search_result:this.elm_result;
106+
elm.innerHTML='';
107+
for (var i = 0; i < arrResultHTML.length; i++) {
108+
var myLi = document.createElement("LI");
109+
myLi.innerHTML = arrResultHTML[i];
110+
elm.appendChild(myLi);
111+
}
112+
if(arrResultHTML.length === 0){
113+
var myLi = document.createElement("LI");
114+
myLi.innerHTML = '<span>'+this.query?'请尝试输入一些字符，进行搜素！'+'</span>':'没有搜索到任何内容，请尝试输入其它字符！';
115+
elm.appendChild(myLi);
107116
}
108117
},
109118
init:function(){
@@ -112,25 +121,32 @@
112121
var timer = null
113122
this.elm_query.value = kw;
114123
this.query = kw;
124+
if(this.elm_search_result) self.searchResult(true);
115125
this.bindEvent(this.elm_query,'input',function(e){
116126
self.query = e.target.value;
117127
self.pushState()
118-
self.createListHTML();
128+
self.searchResult();
119129
self.elm_result.style.display = self.query?'block':'none';
120130
})
121131
this.bindEvent(this.elm_btn,'click',function(e){
122-
self.createListHTML();
132+
console.log("---->")
133+
if(self.elm_search_result){
134+
self.searchResult(true);
135+
}
136+
else{
137+
window.location.href = self.root_path + '/list.html#!kw='+self.query;
138+
}
123139
})
124140
this.bindEvent(this.elm_query,'focus',function(e){
125-
self.createListHTML();
141+
self.searchResult();
126142
self.elm_result.style.display = 'block';
127143
})
128144
this.bindEvent(this.elm_query,'blur',function(e){
129145
timer = setTimeout(function(){
130146
self.elm_result.style.display = 'none';
131147
},600)
132148
})
133-
if(kw) self.createListHTML();
149+
if(kw) self.searchResult();
134150
}
135151
}
136152

‎template/list.ejs‎

Lines changed: 3 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -3,71 +3,11 @@
33
<%- include('search',{type: "list"}); %>
44

55
<div class="search_list">
6-
<ul>
7-
<li>
6+
<ul id="search_list_result">
7+
<!-- <li>
88
<a href=""><strong>find</strong> - 指定目录下查找文件。</a>
99
<p>find命令用来在指定目录下查找文件。任何位于参数之前的字符串都将被视为欲查找的目录名。如果使用该命令时，不设置任何参数，则find命令将在当前目录下查找子目录与文件。并且将查找到的子目录和文件全部进行显示。</p>
10-
</li>
11-
<li>
12-
<a href=""><strong>mv</strong> - 文件或目录重新命名和移动。</a>
13-
<p>mv命令用来对文件或目录重新命名，或者将文件从一个目录移到另一个目录中。source表示源文件或目录，target表示目标文件或目录。如果将一个文件移到一个已经存在的目标文件中，则目标文件的内容将被覆盖。</p>
14-
</li>
15-
<li>
16-
<a href=""><strong>pssh</strong> - 多台服务器上执行命令的工具。</a>
17-
<p>是一个python编写可以在多台服务器上执行命令的工具，同时支持拷贝文件，是同类工具中很出色的，类似pdsh，个人认为相对pdsh更为简便，使用必须在各个服务器上配置好密钥认证访问。</p>
18-
</li>
19-
<li>
20-
<a href=""><strong>cat</strong> - 用来显示文件的内容。</a>
21-
<p>连接文件并打印到标准输出设备上，cat经常用来显示文件的内容，类似于下的。注意：当文件较大时，文本在屏幕上迅速闪过（滚屏），用户往往看不清所显示的内容。因此，一般用</p>
22-
</li>
23-
<li>
24-
<a href=""><strong>find</strong> - 指定目录下查找文件。</a>
25-
<p>find命令用来在指定目录下查找文件。任何位于参数之前的字符串都将被视为欲查找的目录名。如果使用该命令时，不设置任何参数，则find命令将在当前目录下查找子目录与文件。并且将查找到的子目录和文件全部进行显示。</p>
26-
</li>
27-
<li>
28-
<a href=""><strong>mv</strong> - 文件或目录重新命名和移动。</a>
29-
<p>mv命令用来对文件或目录重新命名，或者将文件从一个目录移到另一个目录中。source表示源文件或目录，target表示目标文件或目录。如果将一个文件移到一个已经存在的目标文件中，则目标文件的内容将被覆盖。</p>
30-
</li>
31-
<li>
32-
<a href=""><strong>pssh</strong> - 多台服务器上执行命令的工具。</a>
33-
<p>是一个python编写可以在多台服务器上执行命令的工具，同时支持拷贝文件，是同类工具中很出色的，类似pdsh，个人认为相对pdsh更为简便，使用必须在各个服务器上配置好密钥认证访问。</p>
34-
</li>
35-
<li>
36-
<a href=""><strong>cat</strong> - 用来显示文件的内容。</a>
37-
<p>连接文件并打印到标准输出设备上，cat经常用来显示文件的内容，类似于下的。注意：当文件较大时，文本在屏幕上迅速闪过（滚屏），用户往往看不清所显示的内容。因此，一般用</p>
38-
</li>
39-
<li>
40-
<a href=""><strong>find</strong> - 指定目录下查找文件。</a>
41-
<p>find命令用来在指定目录下查找文件。任何位于参数之前的字符串都将被视为欲查找的目录名。如果使用该命令时，不设置任何参数，则find命令将在当前目录下查找子目录与文件。并且将查找到的子目录和文件全部进行显示。</p>
42-
</li>
43-
<li>
44-
<a href=""><strong>mv</strong> - 文件或目录重新命名和移动。</a>
45-
<p>mv命令用来对文件或目录重新命名，或者将文件从一个目录移到另一个目录中。source表示源文件或目录，target表示目标文件或目录。如果将一个文件移到一个已经存在的目标文件中，则目标文件的内容将被覆盖。</p>
46-
</li>
47-
<li>
48-
<a href=""><strong>pssh</strong> - 多台服务器上执行命令的工具。</a>
49-
<p>是一个python编写可以在多台服务器上执行命令的工具，同时支持拷贝文件，是同类工具中很出色的，类似pdsh，个人认为相对pdsh更为简便，使用必须在各个服务器上配置好密钥认证访问。</p>
50-
</li>
51-
<li>
52-
<a href=""><strong>cat</strong> - 用来显示文件的内容。</a>
53-
<p>连接文件并打印到标准输出设备上，cat经常用来显示文件的内容，类似于下的。注意：当文件较大时，文本在屏幕上迅速闪过（滚屏），用户往往看不清所显示的内容。因此，一般用</p>
54-
</li>
55-
<li>
56-
<a href=""><strong>find</strong> - 指定目录下查找文件。</a>
57-
<p>find命令用来在指定目录下查找文件。任何位于参数之前的字符串都将被视为欲查找的目录名。如果使用该命令时，不设置任何参数，则find命令将在当前目录下查找子目录与文件。并且将查找到的子目录和文件全部进行显示。</p>
58-
</li>
59-
<li>
60-
<a href=""><strong>mv</strong> - 文件或目录重新命名和移动。</a>
61-
<p>mv命令用来对文件或目录重新命名，或者将文件从一个目录移到另一个目录中。source表示源文件或目录，target表示目标文件或目录。如果将一个文件移到一个已经存在的目标文件中，则目标文件的内容将被覆盖。</p>
62-
</li>
63-
<li>
64-
<a href=""><strong>pssh</strong> - 多台服务器上执行命令的工具。</a>
65-
<p>是一个python编写可以在多台服务器上执行命令的工具，同时支持拷贝文件，是同类工具中很出色的，类似pdsh，个人认为相对pdsh更为简便，使用必须在各个服务器上配置好密钥认证访问。</p>
66-
</li>
67-
<li>
68-
<a href=""><strong>cat</strong> - 用来显示文件的内容。</a>
69-
<p>连接文件并打印到标准输出设备上，cat经常用来显示文件的内容，类似于下的。注意：当文件较大时，文本在屏幕上迅速闪过（滚屏），用户往往看不清所显示的内容。因此，一般用</p>
70-
</li>
10+
</li> -->
7111
</ul>
7212
</div>
7313

‎template/styl/index.styl‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -207,9 +207,20 @@ a.github-corner {
207207
strong{
208208
font-weight bold
209209
}
210+
.kw{
211+
color #f00
212+
font-style inherit
213+
font-weight bold
214+
}
215+
&:hover{
216+
.kw{
217+
color #333
218+
}
219+
}
210220
}
211221
li{
212222
padding 10px 0 10px 0
223+
list-style-type none
213224
p{
214225
padding-top 5px
215226
color #4F4F4F

‎template/styl/mixins/reset.styl‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ html{
1212
a {
1313
text-decoration none
1414
&:hover{
15-
color #1bb800
15+
color #333
1616
}
1717
}
1818
* {

0 commit comments

Comments
 (0)