ssh框架下实现百度搜索自动补全功能

这个项目是实现用户登录的时候自动补全用户名：

1.在userAction中添加代码：

public String autocomplete(){

//数据库中查找数据
String[] str =  userService.findUserName();
if(str==null||str.length==0){
return null;
}
// 用来接收获取符合条件的结果
List<String> strList = new ArrayList<String>();
// StringBuffer sb = new StringBuffer();
// 获取前台输入的字符，去空格，转换成小写
String content = request.getParameter("content").trim().toLowerCase();
// 如果输入的字符存在且不为空
if (content != null && !"".equals(content)) {
// 将符合条件的结果放进集合中
for (String strTemp : str) {
// 以字符串开头
if(strTemp != null){
if (strTemp.toLowerCase().startsWith(content)) {
strList.add(strTemp);

}
}
}   
}

if (strList.size() > 10) {
// 结果集只保存前十个元素
strList = strList.subList(0, 10);
}
// 存放到request属性范围中
request.setAttribute("strList", strList);
return "showAjax";
}

strut2.xml中配置：

<result name="showAjax">/WEB-INF/Ajax.jsp</result>

ajax.js:

function doAjax(id, url) {
var xmlhttp = null;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}


else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}


var index = url.indexOf("?");
if (index != -1) {
url += "&";
} else {
url += "?";
}
url += "time=" + new Date().getTime();
xmlhttp.open("post", url, true);
xmlhttp.send(null);


xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var div = document.getElementById(id);
//alert(xmlhttp.responseText);
div.innerHTML = xmlhttp.responseText;
// div.innerHTML = div.innerHTML + xmlhttp.responseText;
}
}
}

showAjax.jsp:

<%@taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<c:if test="${not empty strList}">
<table cellpadding="0" cellspacing="0" style="background-color:white;width:300px;color:black;font-size:12px;border:1px gray solid;">
<c:forEach items="${strList}" var="str">
<tr style="height:22px;" οnmοuseοver="this.style.background='#BBB8B8';" 
οnmοuseοut="this.style.background='#FFFFFF'">
<td οnmοusedοwn="showClickText(this)">${str}</td>
</tr>
</c:forEach>

</table>
</c:if>

登录页面要添加：

<script type="text/javascript" src="${pageContext.request.contextPath}/ajax.js"></script>

<script type="text/javascript">

function showAjax() {
// 获取文本框中输入的值
var content = document.getElementById("userName").value;
//调用ajax
doAjax("showAjaxId", "userAction_autocomplete.action?content=" + content);
//显示呈现的div
var ajaxdiv =document.getElementById("showAjaxId");
ajaxdiv.style.display = "block";
ajaxdiv.style.position = "absolute";
      ajaxdiv.style.top = document.getElementById("userName").style.top + 138 + "px" ;
      div.style.left = document.getElementById("userName").style.left + 50 + "px";

}
//将滚动条中选中的结果呈现在文本框中
function showClickText(obj) {
document.getElementById("userName").value = obj.innerHTML;
document.getElementById("showAjaxId").style.display = "none";

}
</script>

 <td style="height: 50px;">
             <input AUTOCOMPLETE="off" name="userName" style="width:170px;" size="20" tabindex="1" id="userName" value=" <%=userName%>" οnkeyup="showAjax()"/>
           <div id="showAjaxId" style="width:170px;height:50px;display:none; overflow-y:auto;overflow-x:hidden;"> </div>
   </td>