百度内容自动补全

最新推荐文章于 2024-04-07 15:27:06 发布

zp8126

最新推荐文章于 2024-04-07 15:27:06 发布

阅读量418

点赞数

文章标签： ajax dwr 百度

本文链接：https://blog.csdn.net/zp8126/article/details/51262767

版权

web.xml:

<servlet>
<servlet-name>dd</servlet-name>
<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>dd</servlet-name>
<url-pattern>/xxx/*</url-pattern>
</servlet-mapping>

dwr.xml配置

<!DOCTYPE dwr PUBLIC
"-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"
"http://getahead.org/dwr/dwr20.dtd">
<dwr>
<allow>


<create creator="new" javascript="cityBiz">
<param name="class" value="com.service.CityService" />
<include method="findNameByKey"/>
</create>

<convert converter="bean" match="com.entity.City" />

</allow>

</dwr>

后端Java 方法:

/**
* 根据关键字搜索
*
*/
private String keys = "AAAaaa,zhang,zhangsan,zhaoyun,wanwu,wang,wangliu,zhafei";
public List<String> findNameByKey(String key){
System.out.println(">>>==="+key);
List<String> find = new ArrayList<String>();//保存符合条件的
String[] cs = keys.split(",");

for (String string : cs) {
if(string.startsWith(key)){
find.add(string);
}
}
return find;
}

auto.jps如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>百度-内容自动补全</title>
<script type="text/javascript" src="req.js"></script>
<script type='text/javascript' src='/ajax/xxx/interface/cityBiz.js'></script>
<script type='text/javascript' src='/ajax/xxx/engine.js'></script>
<script type="text/javascript">
var index = -1;
var oldValue;
function findKey(obj){
var v = obj.value;

//上下键时
if(event.keyCode==38 || event.keyCode==40){
var show = document.getElementById("show");
//获取显示列表的div元素对象
var div = show.getElementsByTagName("div");

if(event.keyCode==38){
index--;
if(index==-1){//为了和百度效果相同添加的功能
obj.value = oldValue;
}else
if(index<0){
index=div.length-1;
}
}else{
index++;
if(index==div.length){//为了和百度效果相同添加的功能
obj.value = oldValue;
}else

if(index>div.length){
index = 0;
}
}

//index=index%div.length;
//遍历div下所有的子div
for(var i=0;i<div.length;i++){
if(i==index){//如果等于当前选中的子div 则变背景色
div[i].style.background="gray";
obj.value=div[i].innerHTML;
}else{
div[i].style.background="white";
}
}

return;//上下键时，不在请求后台数据
}
//保存原有的key
oldValue = obj.value;
cityBiz.findNameByKey(v,function(data){
//获取事件源元素的位置
var left = obj.offsetLeft;
var top = obj.offsetTop;
var show = document.getElementById("show");
var height = obj.offsetHeight;

//初始化index
index = -1;

show.style.left = left;
show.style.top = top+height;
var str = "";
for(var i=0;i<data.length;i++){
str += "<div>"+data[i]+"</div>";
}
show.innerHTML = str;
});
}

</script>
</head>

<body>
<center>
<br>
<input name="key" οnkeyup="findKey(this)">
</center>
<div id="show" style="position: absolute "></div>
</body>
</html>

zp8126

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
百度内容自动补全

web.xml:ddorg.directwebremoting.servlet.DwrServletdebugtruedd/xxx/*dwr.xml配置"-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://getahead.org/dwr/dwr20.dt
复制链接

扫一扫