jquery 输前显示 ajax 输入框提示 仿Google Suggest的例子

做一个和google一样可以输前显示，做一个联想词语的小东西。
以下的代码都是摘抄我的工作中写的东西，但是足于能够看明白.

环境: java  struts2    json    jquery   jquery.ajax
jsp：

<td  class="td_input"><input type="text" name="entity.customer" size="15" class="inputclassid" onkeyup="search()" id="customer" value="${entity.customer}" />
		 <div id="suggest" style="display:none"></div>

js:

 function search(){   
    var str=document.getElementById("customer").value;   
    //hide search   
    if(str==""){   
        document.getElementById('suggest').style.display='none';   
        return;   
    }else{   
        //display the suggest   
        document.getElementById('suggest').style.display='';   
    }   
    var suplist;
    var info;
    jQuery.ajax({
    	type: "post",
		dataType: "json",
		url: jQuery("#_path").val()+"/customer/customer!culist.action",
		data: {"filter_LIKE_customername":str},
		async: false,
		success: function(data){
		       var result=""; 
		       info = data.supplier;
			   jQuery.each(info,function(i,n){
       		   result+='<div onmouseover="javascript:suggestOver(this);"';   
               result+='onmouseout="javascript:suggestOut(this);"';   
               result+='onclick="javascript:setSearch('+n.id+',this.innerHTML);"';   
               result+='class="suggest_link">'+n.customername+'</div>'; 						
					});
            document.getElementById("suggest").innerHTML=result;   
				}
		});
}   
//mouse over function   
function suggestOver(div_value){   
    div_value.className='suggest_link_over';   
}   
//mouse out function   
function suggestOut(div_value){   
    div_value.className='suggest_link';   
}   
//click function   
function setSearch(cuid,value){  
    
    setothervalue(cuid);
    document.getElementById('customer').value=value;   
    document.getElementById('suggest').innerHTML='';   
    document.getElementById('suggest').style.display='none';   
}   
 //查出数据库中这条记录的详细信息， 然后赋于其值
 
function setothervalue(cuid)
  {
    var suplist;
    jQuery.ajax({
    	type: "post",
		dataType: "json",
		url: jQuery("#_path").val()+"/customer/customer!getCustomerinfo.action",
		data: {"id":cuid},
		async: false,
		success: function(info){
				$("#customerid").val(info.id);
				$("#linkman").val(info.linkman);
				$("#linkaddress").val(info.linkaddress);
				$("#tel").val(info.tel);
		}
		});
  }
  
  
OnDocumentClick=function(event){   
    if(!event){   
        event=window.event;//ie   
    }   
    var e=event.target;//for firefox   
    if(!e){   
        e=event.srcElement;//for ie   
    }   
    while(e){   
        //only if event source is on search_suggest or the search box   
        //the popup div will not be hidden   
        if(e==document.getElementById('suggest')||e==document.getElementById('customer')){   
            return;   
        }   
        e=e.parentNode;   
    }   
    document.getElementById('suggest').style.display="none";   
}   
  
//for ie   
try{   
    document.onclick=OnDocumentClick;   
}catch(e){   
}   
//for firfox(core Gecko)   
try{   
    document.addEventListener('click',OnDocumentClick,true);   
}catch(e){   
} 

java:

	public String culist() throws Exception {
		HttpServletRequest request = Struts2Utils.getRequest();
		HttpServletResponse response = Struts2Utils.getResponse();
		List<PropertyFilter> filters = HibernateWebUtils.buildPropertyFilters(request);
		page = customerManager.search(page, filters);
		response.setContentType("text/html");
		response.setCharacterEncoding("UTF-8");
		PrintWriter out=response.getWriter();
    	List <Customer>list=page.getResult();
    	StringBuffer strb = new StringBuffer("{\"supplier\":[");
    	for(Customer cu:list)
    	{
    		strb.append("{\"id\":\""+cu.getId()+"\",\"customername\":\""+cu.getCustomername()+"\",\"linkman\":\""+cu.getLinkman()+"\",\"linkaddress\":\""+cu.getLinkaddress()+"\",\"tel\":\""+cu.getTel()+"\"},");
    	}
    	strb.replace( strb.length()-1,  strb.length(), "");
    	strb.append("]}");
    	out.println(strb.toString());
    	out.flush();
    	out.close();
		return "";
	}
	
	public String getCustomerinfo() throws Exception {
		HttpServletResponse response = Struts2Utils.getResponse();
		response.setContentType("text/html");
		response.setCharacterEncoding("UTF-8");
		PrintWriter out=response.getWriter();
		entity=customerManager.get(id);
		StringBuffer strb = new StringBuffer();
		
		strb.append("{\"id\":\""+entity.getId()+"\",");
		strb.append("\"customername\":\""+entity.getCustomername()+"\",");
		strb.append("\"linkman\":\""+entity.getLinkman()+"\",");
		strb.append("\"linkaddress\":\""+entity.getLinkaddress()+"\",");
		strb.append("\"tel\":\""+entity.getTel()+"\"");
		strb.append("}");
		out.println(strb.toString());
		out.flush();
		out.close();
		return "";
	}

评论

1 楼 corsair5iam 2010-10-28  

很好，赞一个，如果能分享一下“inputclass”，“suggest_link_over”，“suggest_link”的css样式就更好了