类似Google搜索引擎

//action 代码。。。。

public ActionForward suggest(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws Throwable {
response.setContentType("application/xml;charset=UTF-8");
response.setHeader("Charset","UTF-8");
response.setCharacterEncoding("UTF-8");
String output = "";
//处理接受的参数
String key = getString(request.getParameter("fname"));
if(!"".equals(key)){
ArrayList matchList = getMatchString(key);
if(!matchList.isEmpty()){
output += "<response>";
for(int i=0;i<matchList.size();i++){
String match = matchList.get(i).toString();
output += "<item>"+match+"</item>";
}
output +="</response>";
}
}
response.setContentType("text/xml");
response.getWriter().print(output);
return null;
}

public ArrayList getMatchString(String key){
ArrayList prod = new ArrayList();
List<Product> productList = (List<Product>)productService.loadProduct();
if(productList.size() != 0){
for (Product product : productList) {
prod.add(product.getFname());
}
}
ArrayList result = new ArrayList();
if(!prod.isEmpty()){
int k = 0;
for(int i=0;i<prod.size();i++){
String str = prod.get(i).toString();
if(str.startsWith(key)){
k++;
result.add(str);
if(k == 4){
break;
}
}
}
}
return result;
}

//客服端代码。。。。。。。。。。。 脚本

//================ 搜索提示方法
function createXMLHttpRequest(){

if (window.ActiveXObject){
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}else if (window.XMLHttpRequest){
XMLHttpReq = new XMLHttpRequest();
}
}
//出来服务器响应效果
function handleResponse(){
if(XMLHttpReq.readyState == 4){
if(XMLHttpReq.status == 200){
clearTable();
var out = "";
var res = XMLHttpReq.responseXML;
var items = res.getElementsByTagName("item");
for(var i=0;i<items.length;i++){
addRow(items(i).firstChild.nodeValue);
}
setDivStyle();
}
}
}

// 清除表格中的结果
function clearTable(){
var content = document.getElementById("content");
while(content.childNodes.length>0){
content.removeChild(content.childNodes[0]);
}
}

//向输入提示的表格中添加一条记录
function addRow(item){
var content = document.getElementById("content");
var row = document.createElement("tr");
var cell = document.createElement("td");
cell.appendChild(document.createTextNode(item));
cell.onmouseover = function(){this.style.background="#00CCCC"};
cell.onmouseout = function(){this.style.background="#f5f5f1"};
cell.onclick = function(){
document.getElementById("fname").value = this.innerHTML;
document.getElementById("suggest").style.visibility="hidden"}; //hidden
row.appendChild(cell);
content.appendChild(row);
}
//发送客户端请求
function sendRequest(url){
createXMLHttpRequest();
XMLHttpReq.open("GET",url,true);
//指定响应函数
XMLHttpReq.onreadystatechange = handleResponse;
XMLHttpReq.send(null);
}

//调用AJAX自动提示功能
function suggest(){
var fname = document.getElementById("fname").value;
fname = fname.replace(/(^\s*)|(\s*$)/g,"");
sendRequest("ProductAction.do?postMethod=suggest&fname="+fname)
}
// 设置输入提示框的位置和风格
function setDivStyle(){
var suggest = document.getElementById("suggest");
suggest.style.border = "black 1px solid";
suggest.style.left = 475;
suggest.style.top = 147;
suggest.style.width = 262;
suggest.style.backgroundColor ="";
document.getElementById("suggest").style.visibility = "block";
}

//客服端页面。。。。。。。。


<table width="80%" border="0" align="center" cellpadding="0"
cellspacing="0">
<tr>
<td width="29%" align="right"><span
style="color: white;font-size:20px;font-weight: bold">商品搜索</span></td>
<td width="36%"><html:text property="fname" size="25"
style="font-size:20px;height:20px" maxlength="25"
οnkeyup="suggest()" οnkeydοwn="enterEvent();"/>
<div id="suggest" style="position:absolute;top:0;left:0;">
<table align="left" style="font-size: 20px;height: 20px"
bordercolor="#FFFFFF">
<tbody id="content" style="font-size: 20px;height: 16px"></tbody>
</table>
</div>

</td>
<td width="9%" align="left"><img src="images/eshop/search.gif"
width="40" height="30" style="cursor: hand"
onClick="javascript:pageControl('First');todo('to_search')"></td>
<td width="26%"
style="color: white;font-size:20px;font-weight: bold"><html:link
href="#" οnclick="advanced_search();">进入高级搜索</html:link></td>
</tr>
</table>