php联想搜索

最新推荐文章于 2021-03-22 21:52:58 发布

别动我的love

最新推荐文章于 2021-03-22 21:52:58 发布

阅读量657

点赞数

分类专栏： PHP

本文链接：https://blog.csdn.net/starrykey/article/details/52027112

版权

PHP 专栏收录该内容

67 篇文章 0 订阅

订阅专栏

    <meta charset="utf-8">  
    <input type="text"  value="" id="wd">  
    <div style='background: #e1e1e1;width:220px;display:none;' id="rs">  
        <ul>  
      
        </ul>  
    </div>  
    <script src="../jquery-2.1.4.min.js"></script> //注意jquery引进路径  
    <script>  
        $(function(){  
            $("#wd").keyup(function(){  
                var word=$(this).val();  
                $.ajax({  
                    url:'http://suggestion.baidu.com/su?wd='+word+'&cb=showli',  
                    dataType:'jsonp',  
                    jsonpCallback:'showli',  
                    success:function(txt){  
                        var arr=txt.s;  
                        var li="";  
                        $.each(arr,function(i,val){  
                            li+="<li>"+val+"</li> ";  
                        });  
                        $("#rs ul").html(li);  
                        $("#rs").slideDown('fast');  
                        //鼠标经过元素的背景颜色改变  
                        $("#rs ul li").bind('mouseenter',function(){$(this).css({'background':'yellow'})});  
                        $("#rs ul li").bind('mouseleave',function(){$(this).css({'background':'#e1e1e1'})});  
                        $("#rs ul li").bind('click',function(){  
                            $("#wd").val($(this).html());  
                            $("#rs").slideUp('fast');  
                        });  
                    }})  
            })  
        })  
    </script>