百度词库联想

最新推荐文章于 2024-07-13 07:43:46 发布

annan211

最新推荐文章于 2024-07-13 07:43:46 发布

阅读量495

点赞数

分类专栏： javascript html jquery 文章标签： json javascript ViewUI

本文链接：https://blog.csdn.net/annan211/article/details/84722458

版权

javascript html 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

jquery

15 篇文章 0 订阅

订阅专栏


<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>RunJS</title>
        <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.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">
    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 li").css("padding","5px 0 5px 0px");
         
        $(".queryList ul li").hover(function(){
            $(this).css("background","#ccc");
        },function(){
            $(this).css("background","#FFF");
        });
    }
    var eventSetting=function(){
$(".queryList ul li").click(function(){
            console.log($(this).html());
            $("#keyword").val($(this).html());
        });
    }
    $(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) {
            console.log("ûԐŚɝ");
            $(".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();
        }
        console.log(queryList);
    }
    </script>
    </body>
</html>

请尊重知识，请尊重原创更多资料参考请见 http://www.cezuwang.com/listFilm?page=1&areaId=906&filmTypeId=1