类似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"
onkeyup="suggest()" onkeydown="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="#" onclick="advanced_search();">进入高级搜索</html:link></td>
</tr>
</table>