使用jQuery实现输入框提示-优快云博客

本文链接：https://blog.youkuaiyun.com/mobeinight/article/details/42120771

<pre name="code" class="html"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<script src="jquery-1.8.2.min.js"></script>
</head>
<body>
	<input type="text" name="test" id="test">
	<input type="hidden" value="" id="tex1">
	<div id="tex2" style="border:solid 1px #000fff;display:none;width:173px;"></div>
</body>
<script>
	$('#test').keyup(function(){
		var htm = '';
		if($('#test').val().length<=0){
			 $('#tex1').val('');
			 $('#tex2').empty();
			 $('#tex2').hide();
		}
		if(($('#test').val().length)>0){
			$.getJSON("json.php?k="+$('#test').val(), function(json){
			   $.each(json,function(i, item){
			   		htm += "<div class='kkk' aaa='"+item[0]+"' >"+item[2]+"</div>";
			   })
			   $('#tex2').show();
			   $('#tex2').empty();
			   $('#tex2').append(htm);
			});
		}
	})
	$(".kkk").live('click',function(){
        $('#test').val($(this).html());
        $('#tex1').val($(this).attr('aaa'));
        $('#tex2').empty();
        $('#tex2').hide();
    })

</script>
</html>

简单的自动完成