下拉提示文本框

文本框在当用户输入时，常常需要把相近的信息提示给用户，以方便用户选择。
总体的思路是：
在txt文本框的onkeyup事件中，发送ajax请求，到数据库去取相似的记录，把得到的结果构成字符串传到前台，再在前台里拆分来按要求显示。
ajax请求到后台取数据的代码忽略，只取js前台的代码：

var eventElement;
  function inputSuggest() {   
  	eventElement = event.srcElement || event.target;
  	var eventEleValue = eventElement.value;
  	if(eventEleValue){
		var url = urlPrefix + "/jsp/vou_record_mgr/getLinkBrandAndModel.do";
		pars = "EventEleValue="+encodeURIComponent(encodeURIComponent(eventEleValue));
		new Ajax.Request(
			url,		
			{	parameters: pars,
				method:"get",
				onCreate:function(){
				},
				onComplete:function(originalRequest){
					//alert(originalRequest.responseText);
					if(originalRequest.responseText.indexOf("#")==-1){
						if($("reslut_div")) {
							$("reslut_div").innerHTML = '';
	 						$("reslut_div").style.display = 'none';
							return;
						}
					}
					var str = originalRequest.responseText.split("#");   
					var suggestStr = "<table width=\"100%\" border=\"1\" cellpadding=\"1\" cellspacing=\"1\">";
			        for(i=0; i < str.length - 1; i++) {   
			           suggestStr += '<tr><td onmouseover="onmouseOver(this);" onmouseout="onmousetOut(this);" onclick="setSuggestValue(this.innerHTML);" class="onmouset_out">' + str[i] + '</td></tr>';   
			        }
			        suggestStr += "</table>";
			        //先清空
			        if($("reslut_div")) {
			        	$("reslut_div").innerHTML = '';;
			        }	
					if(!$("reslut_div")){
						var res_div = document.createElement('div');
						res_div.id = "reslut_div";
					}else{
						res_div = $("reslut_div");
					}	
					res_div.innerHTML = suggestStr;
					res_div.style.background = '#99CCFF';
					res_div.style.position='absolute';
					res_div.style.left=frontShowMgr.getxy(eventElement).X+'px';
					res_div.style.top=frontShowMgr.getxy(eventElement).Y+eventElement.clientHeight+'px';
					res_div.style.width = eventElement.clientWidth +'px';
					res_div.style.height = 150 +'px';
					res_div.style.overflow  = 'scroll';
					res_div.style.border = '1px';
					if(!$("reslut_div")){
						document.body.appendChild(res_div);
					}
					res_div.style.display = '';
				}
			}
		);
  	}
  }   
  function onmouseOver(div) {   
  	div.style.background = '#FFDEAD';
  	div.style.cursor = 'hand';
  }   
  function onmousetOut(div) {   
  	div.style.background = '#99CCFF';
  	div.style.cursor = 'auto';  	
  }   
  function setSuggestValue(value) {   
	eventElement.value = value;   
	if($("reslut_div")) {
		$("reslut_div").innerHTML = '';
		$("reslut_div").style.display = 'none';
		return;
	}
  }   

 以下注意的几个知识点是：

1.当要动态的需要在前台展示一些东西的时候，常常的思路就是：

先document.createElement('div')，设置这个元素innerHTML和属性，最后document.body.appendChild()。

注意的是，有时候我们利用document中已存在的div来进行appendChild(),但如果没有这个已存在的div也没有必要写一个，只需要用document.body就可以了。因为有时候这个联动的下拉框可能做为一个jsp供其它人直接引用，如果你在jsp里create了div，引用多个这个jsp就会出现多个这样的div，这样就会有问题了。

2.用event.srcElement || event.target来获得事件触发对象。

3.用encodeURIComponent(encodeURIComponent(eventEleValue))来进行对汉字的url编码传递
3.样式方面：
设置元素的height为固定值且设置overflow，使得可以拖动滚动条。
元素的clientWidth为元素的宽度，而不是想当然的width或是style.width
把table的td的值赋给txt，用this.innerHTML来赋值过去

设置元素的position为absolute，设置元素的left,top为event元素的x,y值

	getxy:function(e){
	 	var x = 0;
	 	var y = 0;
	 	while(e){
	 		x += e.offsetLeft;
	 		y += e.offsetTop;
	 		e = e.offsetParent;
	 	}
	 	return {X:x,Y:y}
	 },

 最终的效果如下：