仿百度下拉菜单 Ajax + struts2

这几天项目中要用到模糊搜索的功能，所以仿百度下拉菜单，结合所学知识完成相关任务，话不多说直接上当代码

1、HTML

<div>
<s:textfield name="videoName" id="videoNameId"
onkeyup="getTip(this);" value="请输入要搜索的视频名称"
onmousedown="changeInfo(this)" cssstyle="width:150px" />
</div>

2、JavaScript

<script type="text/javascript">

//点击输入框，“请输入要搜索的视频名称”消失
var changeInfo = function(input){
if(input.value == "请输入要搜索的视频名称"){
input.value = "";
}
};

//创建一个XMLHttpRequest对象

function createXMLHttpRequest() {
var xmlHttp;

try {
// Firefox,Opera 8.0+,Safari
xmlHttp = new XMLHttpRequest();
} catch (e) {

// Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {

try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("您的浏览器不支持AJAX！");
return false;
}
}
}
return xmlHttp;
}

var getTip = function(video) {
var xmlHttp = createXMLHttpRequest();
if (xmlHttp == null) {
return;
}
var list = document.getElementById("listItem");
var videoName = video.value;
var isie = (document.all) ? true : false;//判断是IE内核还是Mozilla
//根据不同的内核进行不同的事件判断
if (isie) {
if (window.event.keyCode == 40) {
//下拉列表获得焦点
list.focus();
//第一个选项被选中
list.options[0].selected = "selected";
//文本框中值发生改变
document.getElementById("videoName").value = list.options[0].text;

//如果选项改变，那么相应值也要改变
list.onchange = function() {
var index = this.selectedindex;
list.options[index].selected = "selected";
document.getElementById("videoName").value = list.options[index].text;
};
//当失去焦点时，下拉菜单消失
list.onblur = function(){
list.style.display = "none";
};
return;
}
}
var url = "video_getTip.action?videoName=" + videoName;

//设置回调函数
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
document.getElementById("showItem").innerHTML = xmlHttp.responseText;
}
};
//对URL进行字符集处理
url = encodeURI(url);
//准备发送
xmlHttp.open("get",url,true);
//发送请求
xmlHttp.send(null);
};
</script>

3 、ACTION

// 进行模糊查询（ 范例 ）
List<Video> videos = null;
// 特定条件查询
if (videoName != null) {
if (videoName.equals("请输入要搜索的视频名称")) {
videoName = "";
}
videoName = new String(videoName.getBytes("ISO-8859-1"),"UTF-8");
String newVideoName = "%" + videoName + "%";
videos = videoService.findByVideoName(newVideoName);
}
StringBuffer sb = new StringBuffer();
sb.append("<select id='listItem' name='listItem' style='width:150px;font-size:larger;position: absolute;' multiple='multiple'>");
// 拼接字符串，将数据返回
for (int i = 0; i < videos.size(); i++) {
sb.append("<option value='" + i + "'>" + videos.get(i).getName()
+ "</option>");
}
sb.append("</select>");
inputStream = new ByteArrayInputStream(sb.toString().getBytes("UTF-8"));
return "videoNameInfo";

4、Struts相关配置

//返回结果配置

<result name="videoNameInfo" type="stream">
<!-- 指定Stream生成的响应数据的类型 -->
<param name="contentType">text/html</param>

<!-- 指定由getResult()方法返回输出结果InputStream -->
<param name="inputName">result</param>

</result>

注意：在实现相关功能时，可能发生乱码，请注意编码格式，包括数据库、页面、请求等

相关效果图