【问题标题】:Wikipedia API sandbox, search by user's inputWikipedia API 沙箱,按用户输入搜索
【发布时间】:2017-01-22 21:40:33
【问题描述】:

试图通过用户的输入在维基百科中搜索,但由于某种原因它不起作用。首先我认为这可能是由于跨域问题。但是 .ajax 应该会有所帮助。

这里是代码笔:http://codepen.io/ekilja01/pen/pRerpb

这是我的 HTML:

<script src="https://use.fontawesome.com/43f8201759.js">
</script>


<body>

  <h2 class="headertext">WIKIPEDIA  <br> VIEWER </h2>


  <div class="row">
    <div class="col-10-md">

      <input class="searchRequest blink_me" id="cursor" type="text" placeholder="__"></input>

    </div>

    <div class="searchIcon col-2-md"> </div>
  </div>

<div>
  <p class=results></p>
</div>


</body>

这是我的 jQuery:

$(document).ready(function() {

  var icon = "<i class='fa fa-search fa-2x'></i>";

  $('#cursor').on("keydown", function() {
    $(this).removeClass("blink_me");
    var searchIcon = $(".searchIcon");

    searchIcon.empty();
    if ($(".searchRequest").val().length > 0) {
      searchIcon.append(icon);
    }






    searchIcon.on("click", function() {
console.log("clicked!");


      var search = $(".searchRequest").val();

      var url = "https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=" + search + "&format=json&callback=?";  

      $.ajax({
        dataType: "jsonp",
        url: url,
        success: function(data) {
          $(".results").html(data[0]);

          console.log(data[0]);
             }

      });
    });
  });
});

做错了什么?请帮忙。

【问题讨论】:

    标签: javascript jquery json jsonp


    【解决方案1】:

    你的js的加载顺序有错误。

    data 对象包含索引为 2 的数组中的结果文本,我假设这是您想要显示的内容,请将其更改为

    $(".results").html(data[2]);
    

    您可以在此处查看原始代码的修改版本

    http://codepen.io/anon/pen/mRmGXG

    【讨论】:

    • 有点错误 $(".results").html([2]) 但我明白了。必须是 $(".results").html(data[2]。非常感谢!
    • 我忘了按保存按钮,现在应该没问题了。
    • 您能否进一步告诉我如何将所有已找到的 10 个结果显示在页面上?我想我必须为每个使用?
    • 可以,可以使用 $.each(result, function(i, v){ /* add code to add each result*/});取决于您希望如何显示它们。
    • 感谢日志。非常感谢!
    猜你喜欢
    • 2016-09-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-11-17
    • 1970-01-01
    • 1970-01-01
    • 2014-02-22
    • 1970-01-01
    相关资源
    最近更新 更多