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 "";
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值