<!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>
时间： 2024-07-31 06:41:55