如何在当前页中做搜索？

[xiechunmei13]

例如：

现在页面中已加载了所有数据，用s标签输出到页面中。
页面中另有一搜索框，搜索按钮，点击搜索按钮要求搜索当前页面中符合搜索条件的值。
一开始我是在Body中全部搜索，给其高亮变色显示。
但后来改需求说要求把符合搜索条件的整条信息，（当然也可能不只一条信息）放入到新的div中，
好比我们在google搜索时，输入java 关键字，显示所有关于Java的帖子，我这里如果输入java关键字则在新的div中显示关于java的这条数据。其中可能包括 id,name，code,url,.......等等的自段。
大家给点意见行吗？
我只想到list会一直存在缓存中，那么我点击搜索的时候直接获取list

 
  var json='${listChannel}';//这里得到了一串类似实体的输出的字符串，我以为是实体对象，可是
	   alert(json[0]);//这里输出的时候第一位是‘[’
   		 var str = "";
	    for (var one in json)
	    {
	        for(var key in json[one])
	        {
	            str += json[one][key] + ",";//通过这样得到后以这样的形式输出//
/**[,c,o,m,.,x,m,.,i,t,v,.,e,n,t,i,t,y,.,I,p,t,v,C,h,a,n,n,e,l,@,2,e,8,d,4,7,,, ,c,o,m,.,x,m,.,i,t,v,.,e,n,t,i,t,y,.,I,p,t,v,C,h,a,n,n,e,l,@,3,d,6,d,f,5,,, ,c,o,m,.,x,m,.,i,t,v,.,e,n,t,i,t,y,.,I,p,t,v,C,h,a,n,n,e,l,@,f,e,0,c,a,b,,, ,c,o,m,.,x,m,.,i,t,v,.,e,n,t,i,t,y,.,I,p,t,v,C,h,a,n,n,e,l,@,f,1,d,3,f,d,,, ,c,o,m,.,x,m,.,i,t,v,.,e,n,t,i,t,y,.,I,p,t,v,C,h,a,n,n,e,l,@,9,4,9,6,e,a,,, ,c,o,m,.,x,m,.,i,t,v,.,e,n,t,i,t,y,.,I,p,t,v,C,h,a,n,n,e,l,@,1,3,f,e,8,3,a,,, ,c,o,m,.,x,m,.,i,t,v,.,e,n,t,i,t,y,.,I,p,t,v,C,h,a,n,n,e,l,@**/

	        }
	    }
	     document.getElementById("find_div_id").innerHTML=str;

请各位支支招。。。谢谢了。

[xiechunmei13]

现我将后台List封装转换为json格式字符串。传到jsp中。剩下的解决 在脚本中如何循环遍历这个json格式的字符串。。并找到我要的那条数据。

[sangshusen_1988]

json格式的数据那不就容易遍历了吗
eval(json);

[xiechunmei13]

谢谢楼上
有贴帖都忘记掉了。不好意思。已经解决了。呵呵。虽然不是看你的回答解决的，但自己的处理也是那样
var tep= eval(${jsonString});取到后台数据后
直接可以取属性值。
tep[i].name

[xiechunmei13]

<script type="text/javascript">
String.prototype.trim = function() { return this.replace(/^\s+|\s+$/g,''); }
function sub_fm_find(formobj)
{
if(formobj.channalName.value.trim() != "" && formobj.channalName.value.trim() != "请输入您要搜索的频道")
{
var tep= eval(${jsonString});
var html='';
for(var i=0;i<tep.length;i++)
{

if(tep[i].name.indexOf(formobj.channalName.value.trim())!=-1
|| tep[i].prog_name.indexOf(formobj.channalName.value.trim())!=-1){

html+="<div class=\"RoundedCorner\" style=\"margin-left: 15px; margin-top: 3px;\"> ";
html+="<b class=\"rtop\"> <b class=\"r1\"></b> <b class=\"r2\"></b> <b class=\"r3\"></b> <b class=\"r4\"></b> </b>";
html+="<table width=\"285\" style=\"margin-left: 3px\">";
html+=" <tr>";
html+="<td width=\"52\" rowspan=\"2\"><a href=\""+tep[i].code+"\">";
html+="<img src=\"<%=path%>"+tep[i].icon+"\" /> </a> </td>";
html+="<td width=\"80\"><span style=\"font-size: 14px;\">";
html+=" <a href=\""+tep[i].code+"\">";
html+=tep[i].name+"</a></span> </td>";
html+=" <td width=\"164\" align=\"right\"><a href=\""+tep[i].code+"\">";
html+="<img class=\"hand\" src=\"images/demand/btn_play.png\" /></a> ";
html+="<a href=\"javascript:insertLive('','"+tep[i].name+"','"+tep[i].mediCode+"','"+tep[i].icon+"','"+tep[i].television_id+"','"+tep[i].code+"','"+tep[i].play_datetime+"','"+tep[i].prog_name+"','<%=path%>');\">";
html+="<img src=\"images/demand/btn_shoucang.png\" /></a></td>";
html+=" </tr>";
html+=" <tr>";
html+=" <td width=\"80\">"+tep[i].play_datetime+"</td>";
html+=" <td width=\"164\">"+tep[i].prog_name+"</td>";
html+=" </tr>";
html+=" </table>";
html+=" <b class=\"rbottom\"> <b class=\"r4\"></b> <b class=\"r3\"></b> <b class=\"r2\"></b> <b class=\"r1\"></b> </b> </div>";
}
}
document.getElementById("find_div_id").innerHTML=html;
highlight(formobj.channalName.value.trim());
document.getElementById("find_div_id").style.display="block";
document.getElementById("aaa").style.display="none";
}
else
{
document.getElementById("aaa").style.display="block";
document.getElementById("find_div_id").style.display="none";
}
}
function encode(s){
return s.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/([\\\.\*\[\]\(\)$\^])/g,"\$1");
}
function decode(s){
return s.replace(/\\([\\\.\*\[\]\(\)$\^])/g,"$1").replace(/>/g,">").replace(/</g,"<").replace(/&/g,"&");
}
function highlight(s){
s=encode(s);
var obj= document.getElementById("find_div_id");
var t=obj.innerHTML.replace(/<span\s+class=.?highlight.?>([^<>]*)<\/span>/gi,"$1");
obj.innerHTML=t;
var cnt=loopSearch(s,obj);
t=obj.innerHTML
var r=/{searchHL}(({(?!\/searchHL})|[^{])*){\/searchHL}/g
t=t.replace(r,"<span class='highlight'>$1</span>");
obj.innerHTML=t;
// alert("搜索到关键词"+cnt+"处")
}
function loopSearch(s,obj){
var cnt=0;
if (obj.nodeType==3){
cnt=replace(s,obj);
return cnt;
}
for (var i=0,c;c=obj.childNodes[i];i++){
if (!c.className||c.className!="highlight")
cnt+=loopSearch(s,c);
}
return cnt;
}
function replace(s,dest){
var r=new RegExp(s,"g");
var tm=null;
var t=dest.nodeValue;
var cnt=0;
if (tm=t.match(r)){
cnt=tm.length;
t=t.replace(r,"{searchHL}"+decode(s)+"{/searchHL}")
dest.nodeValue=t;
}
return cnt;
}
</script>
<style type="text/css">
.highlight {
font-weight: bold;
color: red;
}
</style>
搜索出当前页中List数据下 否和某个关键字的数据显示到新的div中 且让关键字变色。