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

69 阅读 0 评论 46 点赞

我是靠谱客的博主欢喜宝贝，最近开发中收集的这篇文章主要介绍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 "";
	}