jq获取百度搜索下拉框

首先先将百度的搜索API进行分析，主要是分析他的通过页面传进去的参数，和回调函数名，以及服务器请求成功之后返回的数据
其实网上可以查到很多分析后的免费API比如天气预报,城市搜索等自己可以试试

注意：本例中用到两个API一个是
根据关键
字搜索的API
sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?cb=sr&wd="+value（关键字）
另一个是点击显示对应
网页的API
https://www.baidu.com/baidu?tn=monline_3_dg&ie=utf-8&wd="+"要显示的信息";
最终实现的页面及功能如下：可以根据收入的关键字查找出对应信息，并动态绑定到页面上，并且可以点击链接到对应网页

用到的的语法有，

1：输入关键字后触发的键盘抬起事件onkeyup

2：window.location.href页面跳转

3：for each(function(){})遍历方法

4：Jq的ajax方法jsonp进行跨域请求

主要代码如下

<div class="block">
    <input id="search">
    <span class="btn">百度一下</span>
</div>
<script>
    $(function(){
        $("#search").on("keyup",function () {
            var value = $(this).val();        //输入的关键字
            $.ajax({
                methods:"get",
                //根据关键字搜索的api
                url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?cb=sr&wd="+value,
                dataType:"jsonp",
                jsonpCallback:"sr",         //远程API即不同域之间jq跨域请求方式1
                success:function (data){
                    var datalist=data.s;
                    var ul=$("<ul></ul>");
                    ul.addClass("ul");
                    for(var i=0;i<datalist.length;i++)
                    {
                        $(".block").find("ul").remove();
                        //创建新标签并加上
                        var li=$("<li></li>");
                        li.bind("click",function(){
                            var tex=$(this).text();
                            $("#search").val(tex);
                            $(this).parent("ul").remove();
                        });
                        li.html(datalist[i]);
                         //点击显示对应网页的API
                        var a=$("<a href='https://www.baidu.com/baidu?tn=monline_3_dg&ie=utf-8&wd="+datalist[i]+"'></a>");
                        a.append(li);
                        ul.append(a)
                    }
                    $(".block").append(ul);

                }
            })
        })
        $(".btn").click(function(){
            var mess=$("#search").val();
            window.location.href='https://www.baidu.com/baidu?tn=monline_3_dg&ie=utf-8&wd='+mess;
        })
    })
</script>

jq获取百度搜索下拉框

猜你喜欢