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

qiao_happy123 2008-07-21 11:32:47

...全文

352 24 打赏收藏转发到动态举报

写回复

用AI写文章

24 条回复

切换为时间正序

请发表友善的回复…

发表回复

_重剑无锋_ 2008-09-22

打赏
举报

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

microns 2008-09-22

打赏
举报

正好，我要的要这个!谢谢贴代码的同志！

zhenai 2008-09-22

打赏
举报

www.ciqcid.com 搜索

________________________________
欢迎朋友加入：Java前辈QQ群10885799

qiao_happy123 2008-09-19

打赏
举报

谢谢20楼

wdcuicui 2008-09-18

打赏
举报

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

[Quote=引用 19 楼 qiao_happy123 的回复:]
13楼大哥我想问，页面上

function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Mircosoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
这段代码作用，我用了一下为什么报错啊！是不是还要再那里设置什么啊
[/Quote]

qiao_happy123 2008-08-19

打赏
举报

13楼大哥我想问，页面上

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

_重剑无锋_ 2008-08-01

打赏
举报

http://user.qzone.qq.com/287868587/blog/51 ajax实现的

dwr 也是一个很好的东东

Java_chenliang 2008-08-01

打赏
举报

怎么有错啊！！报的是网页的错！谁说哈你们做准确没有啊！！
做出来的说一下正确答案啊

java_Cloud 2008-07-25

打赏
举报

学习了

mellow_msb 2008-07-25

打赏
举报

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

qiao_happy123 2008-07-25

打赏
举报

谢谢 contra_wind

contra_wind 2008-07-22

打赏
举报

前面两个是后台代码，用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>

contra_wind 2008-07-22

打赏
举报





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;

    }



}

contra_wind 2008-07-22

打赏
举报



/*

 * 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>

}