javascript - 按 Enter 键搜索不起作用？

Question

我正在尝试使用维基百科的 API 构建一个维基百科查看器，但我有一个小问题。如果我手动按搜索按钮，一切正常，但如果我按 Enter，则什么也不会发生。这是js代码:

  $(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);

    }
 });
}

这是 html 代码:

<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>

这是一个jsfiddle:https://jsfiddle.net/tbgoy836/

Answer 1

将 input type="button" 替换为 submit。此外，input type="submit" 应该位于表单内。在这种情况下，您不需要检查 key 代码，并且 preventDefault 将阻止表单提交的默认行为，因为表单是使用 ajax 提交的。按 Enter/Return 后，它将自行找到第一个提交按钮，并触发单击操作

$(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>