jquery 输前显示 ajax 输入框提示 仿Google Suggest的例子
做一个和google一样可以输前显示，做一个联想词语的小东西。以下的代码都是摘抄我的工作中写的东西，但是足于能够看明白.
环境: javastruts2 json jquery jquery.ajax
jsp：
<tdclass="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 "";}
页:
[1]