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"也应该在表单中。在这种情况下，您无需检查键码和＆amp; 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>

Answer 2

为什么你不用javascript调用函数？

并删除输入的 onclick 参数。

Answer 3

试试$("#submit-button").trigger("click"); 要么您只需调用函数wikiSearch()，而不是触发提交按钮的单击事件

按Enter键搜索不起作用？

3 个答案: