搜索建议样式

http://www.cnblogs.com/qiantuwuliang/archive/2009/08/03/1537213.html -- jquery相关

 

<script type="text/javascript">
        var line = 0;
        function del(){
            if(jQuery("#newDiv")){
                jQuery("#newDiv").remove();
                line = 0;
            }
        }

        jQuery(document).ready(function(){

            //文本框失去焦点时层消失
            jQuery(document.body).click(function(){
                del();
            });

            jQuery(document).keydown(function(){
                // 38 上  40下 13 回车
                if(jQuery("#newDiv")){
                    if(event.keyCode == 40){
                        jQuery("table tbody tr").eq(line)
                            .css("backgroundColor", "#377486")
                            .css("color", "white");
                        jQuery("table tbody tr").eq(line < 0 ? 0 : line - 1)
                            .css("backgroundColor", "white")
                            .css("color", "black");
                        line = (line == jQuery("table tbody tr").length ? 0 : line + 1);
                    }else if(event.keyCode == 38){
                        line = (line == 0 ? jQuery("table tbody tr").length : line - 1);
                        jQuery("table tbody tr").eq(line)
                            .css("backgroundColor", "#377486")
                            .css("color", "white");
                        jQuery("table tbody tr").eq(line > jQuery("table tbody tr").length ? 0 : line + 1)
                            .css("backgroundColor", "white")
                            .css("color", "black");
                    }else if(event.keyCode == 13){

                        jQuery("#keyword").val(jQuery("table tbody tr").eq(line - 1).find("td").eq(0).html());

                        del();
                        doSearch();
                    }
                }
            });

            jQuery("#keyword").bind("propertychange", function(){
                //if(event.keyCode != 38 || event.keyCode != 40 || event.keyCode != 13){

                del();
                var top = jQuery("#keyword").offset().top;
                var left = jQuery("#keyword").offset().left;
                var newDiv = jQuery("<div/>").width(jQuery("#keyword").width() + 6)
                    .css("position", "absolute")
                    .css("backgroundColor", "white")
                    .css("width", "301px")
                    .css("left", left)
                    .css("top", top + jQuery("#keyword").height())
                    .css("border", "1px solid BLACK")
                    .attr("id", "newDiv");

                var table = jQuery("<table width='100%'/>")
                    .attr("cellpadding", "0")
                    .attr("cellspacing", "0");
                jQuery.post("/servlet/GetHotKeywordAction", {key: jQuery("#keyword").val()}, function(xml){
                    jQuery(xml).find("results result").each(function(){
                        var key = jQuery(this).attr("key");
                        var count = jQuery(this).attr("count");

                        var tr = jQuery("<tr/>").css("cursor", "pointer").mouseout(function(){
                            jQuery(this).css("backgroundColor", "white").css("color", "black");
                        }).mouseover(function(){
                            jQuery(this).css("backgroundColor", "#377486").css("color", "white");
                        }).click(function(){
                            jQuery("#keyword").val(jQuery(this).find("td").eq(0).html());

                            del();
                        });
                        var td1 = jQuery("<td/>").html(key).css("fontSize", "12px")
                            .css("margin", "5 5 5 5");
                        var td2 = jQuery("<td/>").html("")
                            .attr("align", "right").css("fontSize", "12px")
                            .css("color", "green").css("margin", "5 5 5 5");

                        tr.append(td1).append(td2);
                        table.append(tr);
                        newDiv.append(table);
                    });
                });

                jQuery(document.body).append(newDiv);

                if(jQuery("#keyword").val() == ""){
                    jQuery("#newDiv").remove();
                }
                //    }
            });

            jQuery("#keyword").bind("input", function(){

                del();
                var top = jQuery("#keyword").offset().top;
                var left = jQuery("#keyword").offset().left;
                var newDiv = jQuery("<div/>").width(jQuery("#keyword").width() + 6)
                    .css("position", "absolute")
                    .css("backgroundColor", "white")
                    .css("width", "301px")
                    .css("left", left)
                    .css("top", top + jQuery("#keyword").height())
                    .css("border", "1px solid BLACK")
                    .attr("id", "newDiv");

                var table = jQuery("<table width='100%'/>")
                    .attr("cellpadding", "0")
                    .attr("cellspacing", "0");
                jQuery.post("/servlet/GetHotKeywordAction", {key: jQuery("#keyword").val()}, function(xml){
                    jQuery(xml).find("results result").each(function(){
                        var key = jQuery(this).attr("key");
                        var count = jQuery(this).attr("count");

                        var tr = jQuery("<tr/>").css("cursor", "pointer").mouseout(function(){
                            jQuery(this).css("backgroundColor", "white").css("color", "black");
                        }).mouseover(function(){
                            jQuery(this).css("backgroundColor", "#377486").css("color", "white");
                        }).click(function(){
                            jQuery("#keyword").val(jQuery(this).find("td").eq(0).html());

                            del();
                        });
                        var td1 = jQuery("<td/>").html(key).css("fontSize", "12px")
                            .css("margin", "5 5 5 5");
                        var td2 = jQuery("<td/>").html("")
                            .attr("align", "right").css("fontSize", "12px")
                            .css("color", "green").css("margin", "5 5 5 5");

                        tr.append(td1).append(td2);
                        table.append(tr);
                        newDiv.append(table);
                    });
                });

                jQuery(document.body).append(newDiv);

                if(jQuery("#keyword").val() == ""){
                    jQuery("#newDiv").remove();
                }
            });
        });

 

    </script>

IE支持 onPropertyChange 火狐支持oninput

Firefox有个oninput事件效果和onPropertyChange一样，所以同时加上oninput和onPropertyChange问题就解决

 

action:

  response.setContentType("text/xml;charset=utf-8");
  request.setCharacterEncoding("utf-8");
  PrintWriter out = response.getWriter();
  String key = request.getParameter("key");
  clsKeyWordViewBus keyWordViewBus = new clsKeyWordViewBus();
  ArrayList<String> resultList = keyWordViewBus.getHotWord(key);
  StringBuilder xml = new StringBuilder();
  xml.append("<results>");
  for(String s : resultList){
      xml.append("<result key='" +s + "' count=''></result>");
  }
  xml.append("</results>");
  //System.out.println("xml: " + xml.toString());
  out.print(xml.toString());
  out.flush();
  out.close();