jquery中用jsonp实现搜索框功能

jQuery 2019-01-06

前面的话：

在上周本来想发一篇模仿必应搜索的界面。但是在准备写文章之前突然想到前面学习了ajax技术，在这里我也让我的页面有一种不需要手动刷新就能获取到数据。但是发现用前面的方法并不能获取到我想要的效果。无奈前几天电脑换系统，把之前的源码丢了（前面有个不好的习惯就是把最近在做的东西放桌面）。今天想彻底把这个问题搞明白。

用jquery和ajax进行初步的尝试：

（本代码是参考网，搜索框制作视频制作，有关具体详情请参考视频。自己之前的代码找不到了，之前最先的想法也是来自那里，所以这次直接用那里的代码）

HTML代码：

rush:xhtml;">
Box">
logo">
search-form">

<div class="suggest" id="search-suggest" >
<ul id="search-result">

  • 搜索结果1
  • 搜索结果2

    • css代码：

    rush:css;"> * { padding: 0; margin: 0; }

    body {

    }

    .bg-div{
    background-image: url('images/river.jpg');
    width: 1228px;
    height: 690px;
    margin: 0 auto;
    position: relative;
    }

    .logo {
    background-image: url('images/logo.png');
    width: 107px;
    height: 53px;
    float: left;
    margin: -4px 18px 0 0;
    }

    form {
    float: left;
    background-color: #fff;
    padding: 5px;
    }

    .search-input-text {
    border: 0;
    float: left;
    height: 25px;
    line-height: 25px;
    outline: none;
    width: 350px;
    font-size: 16px;
    }

    .search-input-button {
    border: 0;
    background-image: url('images/search-button.png');
    width: 29px;
    height: 29px;
    float: left;
    }

    .search-Box {
    position: absolute;
    top: 200px;
    left: 300px;
    }

    search-suggest {

    width: 388px;
    background-color: #fff;
    border: 1px solid #999;
    display: none;
    }

    .suggest ul {
    list-style: none;
    }

    .suggest ul li {
    padding: 3px;
    font-size: 14px;
    line-height: 25px;
    cursor: pointer;/手型/
    /这段代码去掉
    position:absolute;
    left:----px;
    top:----px;
    /
    }

    .suggest ul li:hover {
    text-decoration: underline;
    background-color: #e5e5e5;
    }

    用jquery来实现效果：

    在这之前，我们基本上得到了我们想要的图形效果，但是我们在搜索框内输入想要查询的内容这时候是不会有效果的（一般的搜索框效果都是在键盘输入的时候，下面会显示一部分与之关联的关键搜索信息，然后鼠标移动上去点击后会跳到相应链接）。为了一步步验证我们的思路，我们这里修改一下之前的代码。

    1、将li标签中的定位去掉；

    2、在html中将li标签设置为隐藏。然后我们进行后面的操作。

    思考一：如何在键盘输入的时候就显示相关信息（即：li标签中的内容）？

    思路：我们先引入jquery，然后文档加载完后执行一个键盘事件，然后在键盘事件中改变相应的css效果

    rush:js;"> $(function() { //键盘事件 $("#search_input").bind("keyup",function() { $("#search-suggest").show().css({ top : $("#search-form").offset().top + $("#search-form").height()+10,left : $("#search-form").offset().left,position : "absolute",}); }); });

    这时候，我们在搜索框中输入内容时，下面会跟着显示对应的搜索（模拟）

    思考二：如何实现鼠标点击搜索按钮的时候，会搜索相应的内容？

    思路：用鼠标点击事件，让鼠标点击后设置一个地址，点击后直接跳到相应地址，代码实现：

    rush:js;"> //事件代理 --》鼠标点击事件 $(document).delegate("li","click",function() { var keyword = $(this).text(); location.href = "http://cn.bing.com/search?q=" + keyword; });

    思考三：我们如何在搜索框输入数据时，下面会提示相关搜素信息？ 思路：我们我们用jquery中的get去实现，参考代码：

    rush:js;"> var searchText = $("#search_input").val(); $.get( "http://api.bing.com/qsonhs.aspx?q="+searchText,function(data) { console.log(data); var d = data.AS.Results[0].Suggests; var html = ""; for(var i = 0; i < d.length; i++) { html += "
  • "+d[i].Txt+"
    • "; } $("#search-result").html(html); },"json");

    到这里，按理来说我们这里应该可以得到我们想要的结果了，但是，找了好久都没有发现哪里错了。视频里面接着描述了用JSONP来进行跨域操作，但是我也按视频中的操作，始终得不到我想要的结果，于是我埋头去看《javascript高级程序设计》，去找关于jsonp的用法

    关于jsonp：

    关于jsonp，《javascript高级程序设计》一书中介绍的比较少，下面是我看了之后的归纳。 jsonp的全写是 json with padding，其出现是为了解决各主浏览器的之间的同源策略的问题，一般来说ServerA 域下面的页面是没有办法与非 ServerA 下面的资源进行沟通，而 Html 的