Build a wikipedia viewer - coding help

1

Hello, need some guidance on JQuery code in my Wikipedia Viewer :
After dynamically building the html page to display the search result sets (returned from the API call), I want to dismiss all the result sets when I re-enter the search box to start a new search. So far, I can only dismiss the first result set. Can the JQuery experts on here please help me ? Below is my code snippets

html

  <div class="row form-group">
    <div class="col-md-8 col-md-offset-2  text-center">
      <input type="text" class="search_box" id="input" placeholder="Search Wikipedia">
      <button type="submit" class="btn btn-grn searchSubmit" id="searchSubmit">
        <i class="fa fa-search" aria-hidden="true"></i>
      </button>
      <button type="submit" class="btn btn-grn" id="randomPage"><a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank">
        Feelin' Lucky?</a>
      </button>
      
    </div>
  </div>

  <div id="display-result" class="col-md-6 col-md-offset-3 ">
  </div>

JS
      .success(function(response) {
        var dat = JSON.stringify(response);
        console.log(dat);
        console.log(response);
        response.query.pages.forEach(function(resp) {
          $('#display-result').append(
            "<a href='" + resp.fullurl + "' target= '_blank'><div id='result' class='results'><h3>" + resp.title + "</h3><p = class='extract'>" + resp.extract + "</p></div>");
        })
      });

  $("#input").keyup(function(event) {
    $("#result").hide();          //this only hides the first result set, even if placed in a for-loop
    if (event.keyCode == 13) {
      $("#searchSubmit").click();
    }
  });

Thanks !

2

How about .empty()?

$('#input').keyup(function(event) {
  // I'm assuming the div with this id contains the results.
  $('#display-result').empty();
  // ...
});
1 Like
3

Thanks ! works very well. I tried .hide() on #display-result as below earlier, didn;t work. Could you explain why .empty() work ?

$('#input').keyup(function(event) {
  // I'm assuming the div with this id contains the results.
  $('#display-result').hide();
  // ...
});
4

.hide() only hides that element (as if you set its CSS to display: none; and you can also give it an animation duration). It’s still there in the DOM along with its children.

.empty() removes all of that element’s children entirely. When you used .empty(), all of the results from the previous search are dropped.

1 Like