效果
代碼
$("#name").keyup(function(){
var text = $('#name').val();
/*以下部分實際使用換成Ajax*/
if(text=='張'){
$('#showT').show();
$('#showT').html("<ul><li onclick=\"sure('張三')\">張三</li><li>張飛</li><li>張三丰</li><li>張無忌</li></ul>");
}else if(text=='張三'){
$('#showT').show();
$('#showT').html("<ul><li onclick=\"sure('張三')\">張三</li><li>張三丰</li></ul>");
}else{
$('#showT').hide();
$('#showT').html("");
}
});
function sure(value){
$('#showT').hide();
$('#name').val(value);
}完整代碼
<!DOCTYPE html>
<html>
<head>
<title>jqueryChange</title>
<meta charset="utf-8">
<script src="jquery.min.js"></script>
</head>
<style type="text/css">
*{margin:0;padding:0}
ul li{
list-style-type:none;
}
.showT{
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
width: 80%;
}
#name{
width: 80%;
height: 30px;
text-indent:10px;
}
.reMessage{
margin-left: 10%;
margin-top: 40px;
}
ul{
text-indent:10px;
}
li:hover{
background-color: #f0f0f0;
}
.showT{
display: none;
}
</style>
<body>
<div class="reMessage">
<div>
<input type="text" name="name" id="name">
</div>
<div id="showT" class="showT">
</div>
</div>
</body>
<script type="text/javascript">
$("#name").keyup(function(){
var text = $('#name').val();
if(text=='張'){
$('#showT').show();
$('#showT').html("<ul><li onclick=\"sure('張三')\">張三</li><li>張飛</li><li>張三丰</li><li>張無忌</li></ul>");
}else if(text=='張三'){
$('#showT').show();
$('#showT').html("<ul><li onclick=\"sure('張三')\">張三</li><li>張三丰</li></ul>");
}else{
$('#showT').hide();
$('#showT').html("");
}
});
function sure(value){
$('#showT').hide();
$('#name').val(value);
}
</script>
</html>