百度搜索下拉实现

来源：互联网发布：c语言大小写单词转换编辑：程序博客网时间：2024/05/18 05:08

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page language="java" import="javax.servlet.http.HttpServletRequest"%>
<%
String path = request.getContextPath();
%>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>RunJS</title>
        <script src="<%=path%>/js/jquery-1.6.2/jquery-1.6.2.min.js"></script>
    </head>
    <body>
        <input name="keywords" type="text" id="keyword" value="" class="searchInputT">
        <div class="queryList">
            <ul>
            </ul>
        </div>
    <script type="text/javascript">
    $(".searchInputT").css("width","247px");
    var styleSetting=function(){
        $(".queryList").css("margin","0px");
        $(".queryList").css("width","247px");
        $(".queryList").css("padding","0px");
        $(".queryList").css("margin","0px");
        $(".queryList").css("padding","0px");
        $(".queryList").css("z-index","9999999");
        $(".queryList *").css("background","#FFF");;
        $(".queryList").css("border-left","1px solid #cccccc");
        $(".queryList").css("border-right","1px solid #cccccc");
        $(".queryList").css("border-bottom","1px solid #cccccc");
        $(".queryList ul").css("margin","0px");
        //$(".queryList ul").css("width","247px");
        $(".queryList ul").css("padding","5px 0 5px 0px");
        $(".queryList ul").css("list-style","none");
        $(".queryList ul").css("float","left");
        $(".queryList ul li").css("padding","5px 0 5px 0px");
        $(".queryList ul li").css("list-style-type","none");

        $(".queryList ul li").hover(function(){
            $(this).css("background","#ccc");
        },function(){
            $(this).css("background","#FFF");
        });
    };
    var eventSetting=function(){
    $(".queryList ul li").click(function(){
            $("#keyword").val($(this).html());
            $(".queryList").hide();
        });
    };
    $(function() {
        $("#keyword").bind("input propertychange",
                        function() {
                            $.ajax({
                                     url : "http://suggestion.baidu.com/su?json=1&cb=queryList&wd=" + $(this).val(),
                                     type : 'GET',
                                     dataType : 'jsonp'
                                 });
                        });
    });
    queryList = function(result) {
        var queryList = result.s;
        if (queryList.length < 1) {
            $(".queryList").hide();
        } else {
            $(".queryList ul").html("");
            for (var i = 0; i < queryList.length; i++) {
                $(".queryList ul").append("<li>"+queryList[i]+"</li>");
            }
            styleSetting();
            eventSetting();
            $(".queryList").show();
        }
    };
    </script>
    </body>
</html>

0 0