一个文本框输入 号码数据 到数据库中查找 从数据库中返回多个值(异步显示) 显示到页面的下拉列表框中 这个怎么实现 javaweb ??

解决方案 »

  1.   

    ajax,但是如果绑定到keypress事件当中对服务器请求的次数又太多。
      

  2.   

    用jquery,ajax提交请求,然后jquery解析json,append到你的comobox上面去
      

  3.   

    你看看这个
    http://hi.baidu.com/_feiying/blog/item/7ea87ad41b2db409a08bb772.html
      

  4.   

    JQuery 實現Google搜索動態提示
    2009-03-21 15:21
    1.拷貝js代碼首先要將jquery-1.2.3.pack.js放在js文件加下!<script src="js/jquery-1.2.6.pack.js" type="text/javascript"></script>
    <script language="javascript">var line = 0;
           
    function del(){
        if($("#newDiv")){
            $("#newDiv").remove();
            line = 0;
        }
    }
       
    $(document).ready(function(){
        //文本框失去焦点时层消失
        $(document.body).click(function(){
            del();
        });
               
        $(document).keydown(function(){
        // 38 上 40下 13 回车
            if($("#newDiv")){
                if(event.keyCode == 40){
                    $(".google > tbody > tr").eq(line)
                        .css("backgroundColor", "blue")
                        .css("color", "white");
                    $(".google > tbody > tr").eq(line < 0 ? 0 : line - 1)
                        .css("backgroundColor", "white")
                        .css("color", "black");
                    line = (line == $(".google > tbody > tr").length ? 0 : line + 1);
                }else if(event.keyCode == 38){
                    line = (line == 0 ? $(".google > tbody > tr").length : line - 1);
                    $(".google > tbody > tr").eq(line)
                        .css("backgroundColor", "blue")
                        .css("color", "white");
                    $(".google > tbody > tr").eq(line > $(".google > tbody > tr").length ? 0 : line + 1)
                        .css("backgroundColor", "white")
                        .css("color", "black");
                }else if(event.keyCode == 13){
                    $("#skey").val($(".google > tbody > tr").eq(line - 1).find("td").eq(0).html());
                    del();
                }
            }   
        });
           
        $("#skey").bind("propertychange", function(){
            del();
               
            var top = $("#skey").offset().top;
            var left = $("#skey").offset().left;
            var newDiv = $("<div/>").width($("#skey").width()+4 )
                .css("position", "absolute")
                .css("backgroundColor", "white")
                .css("left", left)
                .css("top", top + $("#skey").height() + 6)
                .css("border", "1px solid blue")
                .attr("id", "newDiv");
                       
            var table = $("<table class='google' width='100%'/>")
                .attr("cellpadding", "0")
                .attr("cellspacing", "0");
                       
            $.post("AjaxSearchItemByItemCodeServlet", {skey: $("#skey").val()}, function(xml){
                $(xml).find("results result").each(function(){
                var skey = $(this).find("categoryCode").text();
                var itemDesc = $(this).find("itemDesc").text();
                            
                var tr = $("<tr/>").css("cursor", "pointer").mouseout(function(){
                    $(this).css("backgroundColor", "white").css("color", "black");
                }).mouseover(function(){
                    $(this).css("backgroundColor", "blue").css("color", "white");
                }).click(function(){
                    $("#skey").val($(this).find("td").eq(0).html());
                               
                    del();
                });
                var td1 = $("<td/>").html(skey)
                    .css("margin", "5 5 5 5");
                var td2 = $("<td/>").html(itemDesc)
                    .attr("align","right")
                    .css("margin", "5 5 5 5")
                    .css("color","green");
                                   
                tr.append(td1).append(td2);
                table.append(tr);
                newDiv.append(table);
            });
        });
                   
        $(document.body).append(newDiv);
                   
        if($("#skey").val() == ""){
            $("#newDiv").remove();
        }               
    });
    });
    </script>
    其中skey是輸入文本框的 name還是id ??這里需要驗證!2.修改AjaxServlet中的SQL語句
    String sql =“select itemCode,itemDesc from FeesDetail order by itemCode ”3.修改XML中的傳遞參數
    while(rs.next()){
                        String itemCode = rs.getString("itemCode");
                        String itemDesc = rs.getString("itemDesc");
                        xml.append("<result>");
                        xml.append("<itemCode>"+itemCode+"</itemCode>");
                        xml.append("<itemDesc>"+itemDesc+"</itemDesc>");
                        xml.append("</result>");
                    }4.設置輸入框不記憶輸入內容。
    <input type="text" autocomplete="off" name = "skey" id ="skey">
    5.控制層遮擋下面的內容。