突然想到了一种很敷衍的搜索方法

发表于 | 分类于 |

公司网站用的是帝国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>&nbsp;</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&nbsp;每页16&nbsp;总数20&nbsp;&nbsp;&nbsp;&nbsp;首页&nbsp;&nbsp;上一页&nbsp;&nbsp;<a href='/zsyz/index_2.html'>下一页</a>&nbsp;&nbsp;<a href='/zsyz/index_2.html'>尾页</a>&nbsp;&nbsp;&nbsp;&nbsp;转到:<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就可以了。

注意

  • 此方法不适合搜索列表页面不存在的元素
  • 比如就不能搜索正文内容。
  • 搜索都是在客户端执行。
  • 不知道数据多了以后会不会很慢。