php联想搜索

最新推荐文章于 2022-05-24 13:29:17 发布

原创最新推荐文章于 2022-05-24 13:29:17 发布 · 709 阅读

0 ·

CC 4.0 BY-SA版权

PHP 专栏收录该内容

67 篇文章

订阅专栏

本文介绍了一种使用jQuery和JSONP实现类似百度搜索建议功能的方法。通过监听输入框的键盘事件，利用Ajax发送请求到百度搜索建议接口获取推荐词汇，并以列表形式显示。实现了输入提示、鼠标悬停高亮及点击填充等功能。

    <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>