Question

求一个JavaWeb开发,SSH 框架,只要实现ajax自动补全功能的项目

Answer 1

首先将下面代码COPY下来写成一个js;
<!-- 开始-->
//自动补全
//autoInput 自动补全输入组件ID
//自动补全UL列表ID
function AutoComplete(autoInputId, autoULId) {
var child = null;
//获取服务器数据value文本框输入值,list数据库返回集合,valueProperty使用list对象的那个属性作为vlaue值
this.autoComplete = function (value,list) {
//清空上次数据
DWRUtil.removeAllOptions(autoULId);
if (child != null && value == child.innerHTML) {
return;
}
if (value == "") {
return;
}
child = null;
if (list.length > 0) {
$(autoULId).style.display = "block";
for (i = 0; i < list.length; i++) {
var title = list[i];
var li = document.createElement("li");
li.ondblclick = function () {
child = li;
$(autoInputId).value = li.innerHTML;
$(autoULId).style.display = "none";
};
li.innerHTML =title;//li.innerHTML 表示数据库中的tname
//alert(li.innerHTML);
$(autoULId).appendChild(li);
}
} else {
$(autoULId).style.display = "none";
}
};

//当按下上下按钮的时候选中数据
window.document.onkeydown = function () {
var key = window.event.keyCode;
//向下
if (key == 40) {
if (child == null) {
var nextNode = $(autoULId).firstChild;
if (nextNode != null) {
child = nextNode;
child.style.backgroundColor = "powderblue";
}
} else {
var nextNode = child.nextSibling;
if (nextNode != null) {
child.style.backgroundColor = "";
child = child.nextSibling;
child.style.backgroundColor = "powderblue";
}
}
//向上
} else {
if (key == 38) {
if (child != null) {
var previousNode = child.previousSibling;
if (previousNode != null) {
child.style.backgroundColor = "";
child = child.previousSibling;
child.style.backgroundColor = "powderblue";
}
}
} else {
if (key == 13) {
if (child != null) {
$(autoInputId).value = child.innerHTML;
$(autoULId).style.display = "none";
}
}
}
}
};

//设置补全数据位置
window.onload = function () {
var oRect = $(autoInputId).getBoundingClientRect();
$(autoULId).style.left = oRect.left - 42;
$(autoULId).style.top = oRect.top + 20;
};
}
<!--结束--> 如果以上js保存不起就将js的编码改为gbk（JS右键属性就是了）,
<!-- 关于上面这个Js你就不要问我为什么了。因为我也不知道 。我只知道我要用的时候我导进来就行了-->
现在就要看jsp页面了:
1.首先:导入上面写入的js，然后在web.xml去配置，然后再在IE中进去测试。找到其它的js.
2.写入以下样式
<style type="text/css">
.aul{list-style-type: none;width: 150px;position: absolute;display: none;}
.aul li{background-color: expression(sourceIndex%2==0?'lavender':'beige')}
</style>
3.函数以及回调函数如下:
<script type="text/javascript">
//创建自动补全对象
var auto= new AutoComplete('dictType','ul1'); //前面一个是input的id,后一个就是ui的id咯
function autoName(value){
DWRService.findTypeByName(value, // DWRService是在dwr.xml中的名称.. findTypeByName是Biz中的方法///方法根据输入的值进行like查询返回list
function(list){
auto.autoComplete(value,list);
});
}
</script> 4.最后一步: //下面这个input是你输入的框要补的那个.. (表示不清..不知道怎么说)
<input type="text" name="basDict.dictType" id="dictType"
onpropertychange="autoName(this.value)">
<ul class="aul" id="ul1" style="cursor:pointer;"> <!--一定是普通的标签..ui是呆会查询符合条件的值显示的位置> <!--上面这些代码是我从我前几天做的项目中copy下来的。
如果你按我这种方式去实现Ajax去实现的话有什么不明白的。可以问我。不过我这几天白天都在做项目，最好晚上留言给我。 呵。不好意思啊。。
再说明一下，整个我都是用dwr框架去实现的/.---->
biz方法如下:
public List findTypeByName(String tName) {
String hql = "select distinct d.dictType from BasDict as d where d.dictType like '%"+tName+"%'";
return super.getHibernateTemplate().find(hql);
} dwr.xml配置如下:
<dwr>
<allow>
<create creator="spring" javascript="DWRService">
<param name="beanName" value="BasDictBiz"/>
</create>
</allow>
</dwr> 要是做出来效果你不满意你可以改一下jsp上的页面上的代码。使下拉的更漂亮
<!---说了那么多了，就这样啊。。打字都打累了....呵。。希望你早日解决此问题-->