CODEWITHSUNDEEP
javascriptjqueryjsonjsonp
Alina Khachatrian
Alina Khachatrian

Reputation: 757

Wikipedia API sandbox, search by user's input

Trying to search in Wikipedia by user's input but it doesn't work for some reason. First I thought it could be due to cross domain problem. But .ajax should help with that.

Here is codepen: http://codepen.io/ekilja01/pen/pRerpb

Here is my 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>

Here is my 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]);
             }

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

What am doing wrong? Please help.

Upvotes: 0

Views: 100

Answers (1)

james_bond
james_bond

Reputation: 6906

There's an error in the order of load for your js.

The data object contains the text of the results in the array with index 2, which i assume is what you want to show, change it to

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

You can check a modified version of your original code here

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

Upvotes: 1

Related Questions