标签：
<!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
