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

はsubmitにinput type="button"を交換してください。また、input type="submit"はフォーム内にある必要があります。この場合、キーコードを確認する必要はありません& preventDefaultは、フォームがを提出しているので、フォームのデフォルト動作を妨げるでしょう。ajaxを使用してを送信しています。入力を押し上/それは最初に自身でボタンを提出し、クリックアクションあなたはJavaScriptで関数を呼び出していないのはなぜ

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

をトリガーするでしょう返しますか？

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

入力のonclickのパラメータを削除します。

Answer 3

あなたは、単に送信ボタン