那位大哥知道类似GOOGLE,查询的下拉提示是怎么做的，用什么技术可以实现啊，怎么实现，求代码

Question

那位大哥知道类似GOOGLE,查询的下拉提示是怎么做的，用什么技术可以实现啊，怎么实现，求代码

Answer 1

此回复为自动发出,仅用于显示而已，并无任何其他特殊作用
楼主【qiao_happy123】截止到2008-07-21 11:32:39的历史汇总数据(不包括此帖)：
发帖的总数量:7                        发帖的总分数:140                      每贴平均分数:20                       
回帖的总数量:16                       得分贴总数量:3                        回帖的得分率:18%                      
结贴的总数量:0                        结贴的总分数:0                        
无满意结贴数:0                        无满意结贴分:0                        
未结的帖子数:7                        未结的总分数:140                      
结贴的百分比:0.00  %               结分的百分比:0.00  %                  
无满意结贴率:---------------------无满意结分率:---------------------
如何结贴请参考这里：http://topic.csdn.net/u/20080501/09/ef7ba1b3-6466-49f6-9d92-36fe6d471dd1.html

Answer 2

去看一下有关lucen方面的吧，

Answer 3

是ajax做出來的，具体的代码以前学ajax时写过，有本叫 ajax in action的书里面就用了google这个下了提示的作为书中的例子，楼主去看看，实现起来很简单

Answer 4

具体思路是
1. 首先获取数据，比如某个字段
2. 然后在文本框事件里面写将用户输入的值和你取出來的对比
3. 使用innerHtml将匹配的值加载到文本框下隐藏的div 里面，然后div里面的oclick事件里面将值塞到文本框ajax in action里面有详细思路

Answer 5

《征服AJAX.LUCENE构建搜索引擎》以google为例子说的很详细。
楼主有兴趣可以看看

Answer 6

用的是Ajax,可以看看《Ajax基础教程》,要是明天没有人告诉你，我就告诉你。

Answer 7

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
import java.io.*;
import java.net.*;import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;
import javax.servlet.*;
import javax.servlet.http.*;/**
 *
 * @author contra
 */
public class AutoCompleteServlet extends HttpServlet {
   
    /** 
    * Processes requests for both HTTP <code>GET</code> and <code>POST</code> methods.
    * @param request servlet request
    * @param response servlet response
    */
    private List names = new ArrayList();
    
    public void init(ServletConfig config)throws ServletException{
        names.add("cctv");
        names.add("csdn");
        names.add("cs");
        names.add("cba");
        names.add("cnn");
        names.add("nb");
        names.add("nba");
        names.add("network");
        names.add("netbox");
    }
    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        String prefix = request.getParameter("names");
        NameService service = NameService.getInstance(names);
        List matching = service.findNames(prefix);
        if(matching.size() > 0){
            PrintWriter out = response.getWriter();
            response.setContentType("text/xml");
            response.setHeader("Cache-Control", "no-cache");
            
            out.println("<response>");
            Iterator it = matching.iterator();
            while(it.hasNext()){
                String name = (String)it.next();
                out.println("<name>"+name+"</name>");                
            }
            out.println("</response>");
            matching = null;
            service = null;
            out.close();
        }else{
            response.setStatus(HttpServletResponse.SC_NO_CONTENT);
        }    }     // <editor-fold defaultstate="collapsed" desc="HttpServlet methods. Click on the + sign on the left to edit the code.">
    /** 
    * Handles the HTTP <code>GET</code> method.
    * @param request servlet request
    * @param response servlet response
    */
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        processRequest(request, response);
    }     /** 
    * Handles the HTTP <code>POST</code> method.
    * @param request servlet request
    * @param response servlet response
    */
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        processRequest(request, response);
    }    /** 
    * Returns a short description of the servlet.
    */
    public String getServletInfo() {
        return "Short description";
    }
    // </editor-fold>
}

Answer 8

import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 *//**
 *
 * @author contra
 */
public class NameService {
    private List names;
    
    private NameService(List list_of_names){
        this.names = list_of_names;
    }
    
    public static NameService getInstance(List list_of_names){
        return new NameService(list_of_names);
    }
    
    public List findNames(String prefix){
        String prefix_upper = prefix.toUpperCase();
        List matches = new ArrayList();
        Iterator it = names.iterator();
        while(it.hasNext()){
            String name = (String)it.next();
            String name_upper_case = name.toUpperCase();
            if(name_upper_case.startsWith(prefix_upper)){
                boolean result = matches.add(name);
            }
        }
        return matches;
    }}

Answer 9

前面两个是后台代码，用LIST模仿数据源。
下面是页面里的script代码
<html>
    <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <head>
        <title>
        </title>    </head>
            <style>
            
            .mouseOut{
                background: #708090;
                color: #FFFAFA;
            }
            .mouseOver{
                background: #FFFAFA;
                color: #000000;
            }
        </style>
        <script type="text/javascript">
            var xmlHttp;
            var completeDiv;
            var inputField;
            var nameTableBody;
            
            function createXMLHttpRequest(){
                if(window.ActiveXObject){
                    xmlHttp = new ActiveXObject("Mircosoft.XMLHTTP");
                }else if(window.XMLHttpRequest){
                    xmlHttp = new XMLHttpRequest();
                }
            }
            
            function initVars(){
                inputField = document.getElementById("names");
                nameTable =document.getElementById("name_table");
                completeDiv = document.getElementById("popup");
                nameTableBody = document.getElementById("name_table_body");
                
            }
            
            function findNames(){
                initVars();
                if(inputField.value.length > 0){
                    createXMLHttpRequest();
                    var url ="autoCompleteServlet?names="+escape(inputField.value);
                    xmlHttp.open("Get",url,true);
                    xmlHttp.onreadystatechange = callback;
                    xmlHttp.send(null);
                    
                }else{
                    clearNames();
                }
            }
            
            function callback(){
                if(xmlHttp.readyState == 4){
                    if(xmlHttp.status == 200){
                        var name = xmlHttp.responseXML.getElementsByTagName("name")[0].firstChild.data;
                        setNames(xmlHttp.responseXML.getElementsByTagName("name"));                        
                    }else if(xmlHttp.status == 204){
                        clearNames();
                    }
                }
            }
            
            function setNames(the_names){
                clearNames();
                var size = the_names.length;
                setOffsets();
            }
            var row,cell,txtNode;
            for(var i = 0;i < size;i++){
                var nextNode = the_names[i].firstChild.data;
                row = document.createElement("tr");
                cell = document.createElement("td");
                cell.onmouseout = function(){this.className='mouseOver';};
                cell.onmouseover = function(){this.classNames='mouseOut';};
                cell.setAttribute("bgcolor","#FFFAFA");
                cell.setAttribute("bgcolor","0");
                cell.onclick = function(){populateName(this);};
                txtNode = document.createTextNode(nextNode);
                cell.appendChild(txtNode);
                row.appendChild(cell);
                nameTableBody.appendChild(row);
            }
            
            function setOffsets(){
                var end = inputField.offsetWidth;
                var left = calculateOffsetLeft(inputField);
                var top = calculateOffsetTop(inputField) + inputField.offsetHeight;
                completeDiv.style.border = "black 1px solid";
                completeDiv.style.left = left +"px";
                completeDiv.style.top = top + "px";
                nameTable.style.width = end + "px";
            }
            
            function calculateOffsetLeft(field){
                return calculateOffset(field,"offsetLeft");
            }
            function calculateOffsetTop(field){
                return calculateOffset(field,"offsetTop");
            }
            function calculateOffset(field,attr){
                var offset = 0;
                while(field){
                    offset += field[attr];
                    field = field.offsetParent;
                }
                return offset;
            }
            
            function populateName(cell){
                inputField.value = cell.firstChild.nodeValue;
                clearNames();
            }
            function clearNames(){
                var ind = nameTableBody.childNodes.length;
                for(var i = ind-1;i >= 0;i--){
                    nameTableBody.removeChild(nameTableBody.childNodes[i]);
                }
                completeDiv.style.border = "none";
            }
        </script>
    <body>
        Names:<input type="text" size="20" id ="names" onkeyup="findNames();"style="height:20"/>
        <div style="position:absolute;" id="popup">
            <table id="name_table" bgcolor="#FFFAFA" border="0" cellspacing="0" cellpadding="0">
                <tbody id="name_table_body"></tbody>
            </table>       
        </div>
    </body>
</html>

Answer 10

谢谢 contra_wind 
 

Answer 11

可以有两种方式，一是使用dwr;二是手写javascript两者都要用到ajax技术，我过会上传个例子给你

Answer 12

http://user.qzone.qq.com/287868587/blog/51   ajax实现的   dwr  也是一个很好的东东

Answer 13

13楼 大哥我想问，页面上
 function createXMLHttpRequest(){
                if(window.ActiveXObject){
                    xmlHttp = new ActiveXObject("Mircosoft.XMLHTTP");
                }else if(window.XMLHttpRequest){
                    xmlHttp = new XMLHttpRequest();
                }
            }
            这段代码作用，我用了一下为什么报错啊！ 是不是还要再那里设置什么啊

Answer 14

报错的原因是：xmlHttp = new ActiveXObject("Mircosoft.XMLHTTP"); 有错误
需要将Mircosoft.XMLHTTP 改为：Microsoft.XMLHTTP
这个错误就没了。

Answer 15

www.ciqcid.com 搜索________________________________
欢迎朋友加入：Java前辈QQ群10885799

Answer 16

http://user.qzone.qq.com/287868587/blog/51  这个可以的啦，ajax的 完整代码