如何在当前页中做搜索？

Question

例如：
    
    现在页面中已加载了所有数据，用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;请各位支支招谢谢了。

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

<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>&nbsp;";
             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中 且让关键字变色。