//页面代码,使用的是Java 后台交互
<html>
<head>
<title>自动补全测试</title>
<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="../js/auto/auto.js"></script>
<style type="text/css">
body {font-family: Arial,Helvetica,sans-serif; font-size: 12px; padding:0px; margin: 5px; }
form {padding: 0px; margin: 0px;}
input {font-family: Arial,Helvetica,sans-serif; font-size: 12px; border: 1px solid #000; width:200px; padding: 1px; margin: 0px; }
#popup {position: absolute; width:202px; color:#004a7e; font-size: 12px; font-family: Arial,Helvetica,sans-serif; left: 41px; top: 25px; }
#popup.show {border: 1px solid #004a7e; }
ul{list-style: none; margin: 0px; padding: 0px; color: #004a7e; }
li.mouseOver { background-color: #004a7e; color: #fff; }
</style>
<script type="text/javascript">
var oInputField;
var oPopDiv;
var oColorsUI;
function initVars() {
oInputField = $("#colors");
oPopDiv = $("#popup");
oColorsUI = $("#colors_ul");
}
function clearColors() {
oColorsUI.empty();
oPopDiv.removeClass("show");
}
function setColors(the_colors) {
clearColors();
oPopDiv.addClass("show");
for (var i = 0; i < the_colors.length; i++) {
oColorsUI.append($("<li>" + the_colors[i] + "</li>"));
}
oColorsUI.find("li").click(function() {
oInputField.val($(this).text());
clearColors();
}).hover(function() {
$(this).addClass("mouseOver");
},
function() {
$(this).removeClass("mouseOver");
});
}
function findColors() {
initVars();
if (oInputField.val().length > 0) {
$.get("auto.htm?actionMethod=onLinkClick", {
sColor: oInputField.val()
},
function(data) {
var aResult = new Array();
if (data.length > 0) {
for(i=0;i<data.length;i++){
aResult.push(data[i].accountNumber);
}
setColors(aResult);
} else clearColors();
});
} else clearColors();
}
</script>
</head>
<body>
<form id="form1" method="post" name="myForm1">
AccountName:
<input type="text" name="colors" id="colors" onkeyup="if(this.value=this.value.replace(/\D/g,'')){findColors()}else{alert('只能输入数字')}" onafterpaste="this.value=this.value.replace(/\D/g,'')" />
</form>
<div id="popup">
<ul id="colors_ul">
</ul>
</div>
</body>
</html>
//Java后台代码,业务层
public AjaxResult onLinkClick() {
String accountNum = this.getContext().getRequestParameter("sColor");
List<Account> accountList = accountService.findAll(accountNum);
AjaxResult ajaxResult = new AjaxResult();
JsonUtil json = new JsonUtil();
String src = json.list2json(accountList);
ajaxResult.setContent(src);
ajaxResult.setCharacterEncoding("UTF-8");
ajaxResult.setContentType(AjaxResult.JSON);
return ajaxResult;
}
//服务层和接口实现
public interface AccountService {
public List<Account> findAll(String accountNum);
}
public List findAll(String accountNum){
accountNum = accountNum+"%";
return this.sqlSessionTemplate.selectList("account.findAll",accountNum);
}
//数据持久层DAO
<select id="findAll" parameterType="String" resultType="com.talkyun.model.Account">
select * from account
<where>
<if test="null!=_parameter and ''!=_parameter">
accountnumber like #{_parameter}
</if>
</where>
</select>
- 大小: 8.2 KB
分享到:
相关推荐
本项目是利用DWR框架实现Ajax无刷新,自动补全功能!
Ajax实现自动补全,案例详细。
Java+Ajax实现简单自动补全。运行时访问地址:http://127.0.0.1:8080/ajaxcomTion/word.jsp
ajax文本框自动补全功能,类似百度自动索引功能。
WEB网页 ajax 自动补全 实现 demo 例子
使用ajax实现自动补全功能,并进行数据库连接操作
ajax自动补全功能 jQuery+ajax
使用sql servler 数据库 ,代码很完整,自己修改db类,根据vo类创建表就行。 虽然不复杂,但是完全弄懂需要耐心。
Ajax实现自动补全和搜索功能,含有使用到的所有工具,以及实现的步骤文档和详细的代码说明
ajax jquery技术 GoogleSuggest 自动补全 源代码
本案例实现如google效果可以自动补全,本案例适合初学ajax代码者,代码简单,安全性考虑稍欠,望下载的朋友,自行考虑实现
就如 百度,Google 搜索一样的 自动补全效果 简单易懂。内部是 一个项目列子,用MyEclipse开发平台 就可以打开运行
ASP自动补全实例 如需要的话 欢迎下载
类似于google百度的搜索引擎 支持这种数据库
.............看看不错的代码粘了就能用!!!..........
java与jQuery整合ajax仿googleSuggest自动补全实例,以返回的json格式的数据对象
效果就像百度和google那样,你输入几个字母就会出现相应的提示,感觉很爽吧,自己也试一下吧。压缩包里有详细的使用说明,5分中让你搞定,呵呵
ajax(DWR框架)实现简单的内容自动补全
利用Ajax实现类似百度的自动补全功能,代码详细,代码正确。
java ajax实现自动补全功能,代码完整,经过调试运行不会出错,有需要的朋友下载