码迷,mamicode.com
首页 > 其他好文 > 详细

字符串筛选输出

时间:2015-03-01 15:35:53      阅读:120      评论:0      收藏:0      [点我收藏+]

标签:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="智能社 - zhinengshe.com" />
<meta name="copyright" content="智能社 - zhinengshe.com" />
<title>智能社 - www.zhinengshe.com</title>
<style>
ul, li, em {margin:0; padding:0; list-style:none;}
#ul1 li {padding:6px 4px;}
</style>
<script>
window.onload=function (){
    var oText1  = document.getElementById(‘txt1‘);
    var oText2 = document.getElementById(‘txt2‘);
    var oUl   = document.getElementById(‘ul1‘);

    var arr = eval(‘(‘+oText1.value+‘)‘); 

    for(var i=0; i<arr.length;i++){
        var sx=‘‘;
        var arr2=arr[i].pin.split(‘ ‘);
        for(var j=0;j<arr2.length;j++){
            sx+=arr2[j].charAt(0);            
        }
        arr[i].sx=sx;
    }
    
    // <!--<li>张三<span>(zhang san)</span></li>-->
    for(var i=0;i<arr.length;i++){
        var json=arr[i];
        var oLi=document.createElement(‘li‘);
        oLi.innerHTML=json.name+"<span>("+json.pin+")</span>";
        oUl.appendChild(oLi);
    }
    oText2.onkeyup=function(){
        oUl.innerHTML=‘‘;
        var value=this.value;
        for(var i=0; i<arr.length;i++){
            var json =arr[i];
            if(json.name.indexOf(value)    != -1
                || json.pin.indexOf(value) !=-1
                  || json.sx.indexOf(value) !=-1){
                var oLi=document.createElement(‘li‘);
                oLi.innerHTML=json.name+"<span>("+json.pin+")</span>";
                oUl.appendChild(oLi);
            }
        }
    };
    
    
    
    
};
</script>
</head>

<body>
输入原始文本(json格式):<br>
<textarea style="width:500px; height:200px;" id="txt1">
[
    {name: ‘张三‘, pin: ‘zhang san‘},
    {name: ‘王斌‘, pin: ‘wang bin‘},
    {name: ‘张春桥‘, pin: ‘zhang chun qiao‘},
    {name: ‘帕多瓦‘, pin: ‘pa duo wa‘},
    {name: ‘王彬‘, pin: ‘wang bin‘},
    {name: ‘张超群‘, pin: ‘zhang chao qun‘},
    {name: ‘王保平‘, pin: ‘wang bao ping‘},
    {name: ‘钟伟强‘, pin: ‘zhong wei qiang‘}
]
</textarea><br>
<br>
<input type="text" id="txt2" /><br>
<ul id="ul1">
    <!--<li>张三<span>(zhang san)</span></li>-->
</ul>
<p>你好啊</p>
</body>
</html>

 

字符串筛选输出

标签:

原文地址:http://www.cnblogs.com/heboliufengjie/p/4307061.html

踩
(0)
赞
(0)
   
举报
评论 一句话评论(0)
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!