公司网站用的是帝国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
5var 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
<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
就可以了。
注意
- 此方法不适合搜索列表页面不存在的元素
- 比如就不能搜索正文内容。
- 搜索都是在客户端执行。
- 不知道数据多了以后会不会很慢。