如何实现点击ajax返回的div组成的下拉框把值返回到文本框

最近在写ajax异步刷新取后台数据返回前台的功能时碰到一个问题，即如何实现点击拼接的div组成的“下拉框”，将内容放入搜索的文本框中的功能。如图1所示。

//原始代码
<div>
	<input type="text" value="1" name="kw" id="tid" style="width:300px;height:20px"><input type="button" value="新的征程">
			</div>
			<div id="did" style="border: 1px solid gray;width: 300px;position:relative;left:-34px;display:none"></div>
		</div> 
	</center>
</body>
<script type="text/javascript" >
$(function(){
	$("#tid").keyup(function(){
		//alert(11);
		$.post("${pageContext.request.contextPath}/kw","kw="+$("#tid").val(),function(obj){
		$("#did").html("");
		//一开始想的是动态拼接id或者name
			//var n=1;
		if(obj!=""){
		$(obj).each(function(){
		//动态拼接
			$("#did").append("<div onmouseover='over(this)' onmouseout='out(this)' onclick='click(this)'>"+this+"</div>");
			$("#did").show();
			//n++;
			
		})
		}else{
			$("#did").hide();
		}	
		},"json")
	})
})

</script>
<script type="text/javascript" >
function over(obj){
	$(obj).css("background-color","gainsboro");
	
}
function out(obj){
	$(obj).css("background-color","white");
}
function click(obj){
	$("#tid").val($(obj).html());
}

一开始的想法是遍历中动态拼接id或者name，即:
先遍历函数.each()外声明一个变量:var n=1;

//每次遍历
$("#did").append("<div onmouseover='over(this)' onmouseout='out(this)' id/name=' "+n+" '>"+this+"</div>");
n++;

然后根据属性选择器或id选择器添加事件。
后来发现不用这么麻烦，直接在拼接的div里添加一个onclick事件即可，但这时我犯了第二个错误。我把onclick事件的名字命名为click，但断点可以进去，却不会触发事件。思考后想到可能引用了jQuery，导致命名重复。重命名后，顺利实现点击div将值付给文本框功能。

<div>
				<input type="text" value="1" name="kw" id="tid" style="width:300px;height:20px"><input type="button" value="新的征程">
			</div>
			<div id="did" style="border: 1px solid gray;width: 300px;position:relative;left:-34px;display:none"></div>
		</div> 
	</center>
</body>
<script type="text/javascript" >
$(function(){
	$("#tid").keyup(function(){
		//alert(11);
		$.post("${pageContext.request.contextPath}/kw","kw="+$("#tid").val(),function(obj){
		$("#did").html("");
			//var n=1;
		if(obj!=""){
		$(obj).each(function(){
			//alert(this);
			//添加onclick方法并重命名
			$("#did").append("<div onmouseover='over(this)' onmouseout='out(this)' onclick='cli(this)'>"+this+"</div>");
			$("#did").show();
			//n++;
			
		})
		}else{
			$("#did").hide();
		}	
		},"json")
	})
})

</script>
<script type="text/javascript" >
function over(obj){
	$(obj).css("background-color","gainsboro");
	
}
function out(obj){
	$(obj).css("background-color","white");
}
function cli(obj){
//将遍历的obj赋值给文本框的value
	$("#tid").val($(obj).html());
}

实现效果图：