CODEWITHSUNDEEP
javascriptjqueryhtml
Daniel
Daniel

Reputation: 549

Pressing enter to search not working?

I'm trying to build a wikipedia viewer using Wikipedia's API, but I have a minor problem. If I manually press the search button, everything works fine, but if I press enter, nothing happens. Here's the js code:

  $(document).ready(function () {
    $("#input").keyup(function (event) {
     if (event.keyCode == 13) {
        $("#submit-button").click();
     }
  });
});

function wikiSearch() {

  var query = document.getElementById("input").value;
  var wiki_api = 'https://en.wikipedia.org/w/api.php';

  var api = "https://en.wikipedia.org/w/api.php?action=query&prop=extracts&exlimit=max&format=json&exsentences=1&exintro=&explaintext=&generator=search&gsrlimit=10&gsrsearch=";
  var wikilink = 'http://en.wikipedia.org/?curid=';

  var link = api + query;
  var html = "";

  $.ajax({
    url: link,
    type: "get",
    dataType: "JSONP",
    success: function (data) {
        var results = data.query.pages;
        var pgs = Object.keys(results);
        pgs.forEach(function (page) {
            var title = results[page].title;
            var text = results[page].extract;
            var pagelink = wikilink + results[page].pageid;

            html += '<a href="' + pagelink + '" target="_blank">' + '<div class="item">' + title + '<br>' + '<p class="description-text" >' + text + '</p>' + '</div></a>  <br> ';
        });

        $('#display').html(html);

    }
 });
}

And here's the html code:

<div class="container" id="content">
  <h1>Wikipedia Viewer</h1>

  <form>
    <input type="text" name="search" placeholder="Search Wikipedia" id="input">
  </form>

  <a href="https://en.wikipedia.org/wiki/Special:Random" class="btn btn-info" target="_blank" id="random">Random page</a>

  <input id="submit-button" type="button" value="Search" onclick="wikiSearch()" class="btn btn-success">

  <div id="display"></div>

</div>

Here's a jsfiddle: https://jsfiddle.net/tbgoy836/

Upvotes: 2

Views: 251

Answers (3)

Sagar Jajoriya
Sagar Jajoriya

Reputation: 2375

Try $("#submit-button").trigger("click"); Or you can simply call the function wikiSearch() instead of trigger the click event of submit button

Upvotes: 0

sametcodes
sametcodes

Reputation: 553

Why you don't call function in javascript?

$("#submit-button").click(function(){
   wikiSearch();
})

And remove onclick parameter of input.

Upvotes: 0

brk
brk

Reputation: 50346

Replace input type="button" to submit. Also the input type="submit" should be inside the form. In that case you don't need to check the keycode & preventDefault will prevent the default behaviour of the form submit, since form is getting submitted using ajax. On pressing enter/return it will find the first submit button by itself and will trigger a click action

$(document).ready(function() {
  $("#searchForm").submit(function(e) {
    e.preventDefault();
    wikiSearch()
  })
});

function wikiSearch() {
  console.log('wikiSearch')
  var query = document.getElementById("input").value;
  var wiki_api = 'https://en.wikipedia.org/w/api.php';

  var api = "https://en.wikipedia.org/w/api.php?action=query&prop=extracts&exlimit=max&format=json&exsentences=1&exintro=&explaintext=&generator=search&gsrlimit=10&gsrsearch=";
  var wikilink = 'http://en.wikipedia.org/?curid=';

  var link = api + query;
  var html = "";

  $.ajax({
    url: link,
    type: "get",
    dataType: "JSONP",
    success: function(data) {
      var results = data.query.pages;
      var pgs = Object.keys(results);
      pgs.forEach(function(page) {
        var title = results[page].title;
        var text = results[page].extract;
        var pagelink = wikilink + results[page].pageid;

        html += '<a href="' + pagelink + '" target="_blank">' + '<div class="item">' + title + '<br>' + '<p class="description-text" >' + text + '</p>' + '</div></a>  <br> ';
      });

      $('#display').append(html);

    }
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" id="content">
  <h1>Wikipedia Viewer</h1>

  <form id="searchForm">
    <input type="text" name="search" placeholder="Search Wikipedia" id="input">
    <div>
      <a href="https://en.wikipedia.org/wiki/Special:Random" class="btn btn-info" target="_blank" id="random">Random page</a>

      <input id="submit-button" type="submit" value="Search" onclick="wikiSearch()" class="btn btn-success">
    </div>
  </form>

  <div id="display"></div>

</div>

Upvotes: 3

Related Questions