<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/jquery-ui.css" />
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.js" ></script>
<script type="text/javascript" src="js/jquery-ui.js" ></script>
</head>
<body>
<input value=""/>
<div class="love"></div>
<script>
$("input").keyup(function(){
var list=[{"name":"雷婷婷"},{"name":"雷玉婷"},{"name":"雷玉琴"}];
list = escape2Html(list);//如果是ajax返回,或者頁面php打印出來的,可能有轉義字符，可以用上
list = eval('(' + list + ')');//防止不是json對象
if($(this).val()!=null && $(this).val()!=""){
var matchStr = new RegExp($(this).val(),'i');//不區分大小寫，用戶英文搜索
$(".love").html("");
for(var i=0;i<list.length;i++){
if(list[i].name.match(matchStr)){
$(".love").append("<div>"+list[i].name+"</div>")
}
}
}else{
$(".love").html("");
}
});
function escape2Html(str) {
var arrEntities={'lt':'<','gt':'>','nbsp':' ','amp':'&','quot':'"'};
return str.replace(/&(lt|gt|nbsp|amp|quot);/ig,function(all,t){return arrEntities[t];});
}
</script>
</body>
</html>
轉自：https://my.oschina.net/zhaomin/blog/657457
稍加修改