公司网站用的是帝国CMS
在这个大前提下，所以的操作都是束手束脚的，要充分的个性化，就需要定制，需要开发。
可是帝国有太多的文件，牵扯的地方太多，懒的一点点的去修改。
领导一句话，你就得给我一个列表一个样式，我的天。
而且领导说要能搜索，我的天。
为了进度我只能这么干了。
搜索思路
正好需要搜索的页面，在列表显示了标题和简介（其实还有副标题，我拿来用作别的用途了）。
我的列表页面就是长这个样子。
代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| ...
// 以下是单个节点的代码
<dl class="parkRank_main">
<dt class="parkRank_img">
<a href="/zsyz/info-1416.html" target="_blank">
<img src="/d/file/zsyz/2018-01-24/c238f38b708c1ea5e735e34dc8e82271.jpg" width="227" height="180"></a></dt>
<dd class="parkRank_info">
<div class="rank_title"><a href="/zsyz/info-1416.html" target="_blank" title="加拿大万锦市">加拿大万锦市</a></div>
<div class="rank_p"><span class="padR-10">招商地址：</span>加拿大万锦市</div>
<div class="rank_p"><span class="padR-10">项目介绍：</span>万锦市是安大略省发展最为迅速的城市之一，被誉为“加拿大高科技之都”。</div>
<div class="rank_p">
<span class="padR-10">关注度：</span>
<i class="width90">
<span class="fc_red">699</span> </i>
2018-01-24</div>
</dd>
<div class="clear"></div>
</dl>
...
|
我就用js来搜索这些代码不就行了么。
说干就干
首先，先要准备用js来获取的所有列表地址，一般列表地址都是有规律的，可以通过分页数据来得到共有几页。
1
2
3
4
5
| var page = 0;
var page_html = $(".pages").html()
var p_start = page_html.indexOf('/') + 1;
var p_end = page_html.indexOf('&');
page = parseInt(page_html.substring(p_start, p_end));
|
对了，分页部分的html代码如下：
1
2
| <div class="pages">页次：1/2 每页16 总数20 首页 上一页 <a href='/zsyz/index_2.html'>下一页</a> <a href='/zsyz/index_2.html'>尾页</a> 转到:<select name=select onchange="self.location.href=this.options[this.selectedIndex].value"><option value='/zsyz/index.html' selected>第 1 页</option><option value='/zsyz/index_2.html'>第 2 页</option></select></div>
|
比如这里得到了page = 2。
然后，用$.get方法依次获取列表页面的html代码，并掐头去尾，只留下列表部分代码。
这里有一个问题，$.get方法要在完全执行完成后，才能去执行搜索操作，就需要使用jquery的$.when方法。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| ...
var html = '';
var getList = [];
for(var i = 1; i <= page; i++){
getList.push($.get((i == 1 ? "/zjzk/index.html" : "/zjzk/index_" + i + ".html"), function(result){
html += result.substring(result.indexOf('<dl class="parkRank_main">'), result.indexOf('<div class="pages">'));
}));
}
$.when.apply($, getList).done(function(){
var list = $(html);
var nlist = [];
$.each(list, function(i, v){
var title = $(v).html();
if(title != undefined && title.indexOf(key) >= 0){
$(v).find('.rank_title').css('color', 'red');
nlist.push(v);
}
});
...
|
这里用到的是，先得到需要$.get的地址列表，然后通过$.when.apply($, getList).done(function(){ do something...;}); 来依次执行获取和搜索。
得到的查询结果是nlist。
最后只要展示出来nlist就可以了。
注意
- 此方法不适合搜索列表页面不存在的元素
- 比如就不能搜索正文内容。
- 搜索都是在客户端执行。
- 不知道数据多了以后会不会很慢。