这几天项目中要用到模糊搜索的功能,所以仿百度下拉菜单,结合所学知识完成相关任务,话不多说直接上当代码
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>
注意:在实现相关功能时,可能发生乱码,请注意编码格式,包括数据库、页面、请求等
相关效果图 (编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|