做一个和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 "";
}
分享到:
相关推荐
jquery练习的例子,仿真google suggestjquery练习的例子,仿真google suggestjquery练习的例子,仿真google suggestjquery练习的例子,仿真google suggestjquery练习的例子,仿真google suggestjquery练习的例子,...
java与jQuery整合ajax仿googleSuggest自动补全实例,以返回的json格式的数据对象
ajax仿google suggest 数据库版。。java
用AJAX实现类似GOOGLE搜索框的功能
AJAX实现类Google Suggest效果 *测试平台:Firefox2.0,IE6.0,IE7.0 *演示地址:http://www.okajax.com/demo/suggest/ *:文件结构: index.htm:首页,展现效果 ajax_result.asp:ajax调用后台返回结果文件 result.asp:...
有窗口 树 可修改的表格 仿GoogleSuggest自动补全等
NULL 博文链接:https://lc2586.iteye.com/blog/731375
仿GoogleSuggest自动补全的功能 绝对实用可用
仿真google suggest的自定义js文件仿真google suggest的自定义js文件仿真google suggest的自定义js文件仿真google suggest的自定义js文件仿真google suggest的自定义js文件仿真google suggest的自定义js文件仿真...
Ajax模仿google提示输入框 使用说明 v1.8 本程序由飞飞asp乐园编写 ************************************************* 特别感谢: 一杯白开水 网友 的帮助 版本所提的修改建议 *********************************...
AJAX实现仿Google Suggest效果
仿google suggest仿google suggest仿google suggest仿google suggest仿google suggest
虽然是演示,但是并不是HelloWorld那种不实用的例子,而是包含两个经典的应用:用户名检测和Google Suggest自动完成。 两个例子都做得比较细,样式也用的比较多,所以一定是可以用于实际项目中的,希望对大家有帮助...
好东西能用,我经常用!大家共享!
VS2005 用Ajax实现无刷新技术和输入前提示!即:Google Suggest
ajax-类似google suggest 的一个简单例子 只有三个页面 js页-ajax asp页-功能实现 show页--显示页 要放在虚拟服务器上看 localhost中看
asp.net & ajax 实现 google suggest
NULL 博文链接:https://312788172.iteye.com/blog/607343
此小程序是模仿Google输入提示框所编写 亦可用于用户注册邮箱时的提示 此程序使用方便简单、易用灵活 且不限Asp、php、net 文件使用说明: 在需要使用的页面首先要引用2个js文件 <script src="jquery1.2.3.min.js"> ...