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

zhzhiqun2005

做一个和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 ';                  result+='onmouseout="javascript:suggestOut(this);"';                  result+='';                  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 "";}