javascript - 如何触发提交并从单击的按钮获取值？

Question

我希望能够单击“wiki”按钮，获取其值并运行搜索。我目前有这个，只要您开始输入，它就会开始搜索。

<input id="searchterm" />
<button id="search">search</button>
<div id="results"></div>

$("#searchterm").keyup(function(e) {
    var q = $("#searchterm").val();
    $.getJSON("http://it.wikipedia.org/w/api.php?callback=?", {
        srsearch: q,
        action: "query",
        list: "search",
        format: "json"
    }, function(data) {
        $("#results").empty();
        $("#results").append("<p>Results for <b>" + q + "</b></p>");
        $.each(data.query.search, function(i, item) {
            $("#results").append("<div><a href='http://it.wikipedia.org/wiki/" + encodeURIComponent(item.title) + "'>" + item.title + "</a><br>" + item.snippet + "<br><br></div>");
        });
    });
});

我想在单击外部按钮后运行搜索，例如:

<button class="wiki" type="submit" value="myValueSearchTerm">Wiki</button>

我知道我可以使用:

$('.wiki').trigger('submit');

但是如何停止当前搜索，等待 .wiki 按钮交互并搜索其值？

Answer 1

更新

OP 要求放置具有任意值的按钮，而不是文本输入。 (参见片段 3)。

<小时/>

将点击事件注册到#search按钮而不是#searchterm(参见代码段1)。或者将更改事件注册到 #searchterm 而不是 keyup。

片段 1

$("#search").on('click', function(e) {
    var q = $("#searchterm").val();
    $.getJSON("http://it.wikipedia.org/w/api.php?callback=?", {
        srsearch: q,
        action: "query",
        list: "search",
        format: "json"
    }, function(data) {
        $("#results").empty();
        $("#results").append("<p>Results for <b>" + q + "</b></p>");
        $.each(data.query.search, function(i, item) {
            $("#results").append("<div><a href='http://it.wikipedia.org/wiki/" + encodeURIComponent(item.title) + "'>" + item.title + "</a><br>" + item.snippet + "<br><br></div>");
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="searchterm" />
<button id="search">search</button>
<div id="results"></div>

片段 2

$("#searchterm").on('change', function(e) {
  var q = $("#searchterm").val();
  $.getJSON("http://it.wikipedia.org/w/api.php?callback=?", {
    srsearch: q,
    action: "query",
    list: "search",
    format: "json"
  }, function(data) {
    $("#results").empty();
    $("#results").append("<p>Results for <b>" + q + "</b></p>");
    $.each(data.query.search, function(i, item) {
      $("#results").append("<div><a href='http://it.wikipedia.org/wiki/" + encodeURIComponent(item.title) + "'>" + item.title + "</a><br>" + item.snippet + "<br><br></div>");
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="searchterm" />
<button id="search">search</button>
<div id="results"></div>

片段 3

$("#wiki").on('click', function(e) {

  var q = $(this).data('subject');

  $.getJSON("http://it.wikipedia.org/w/api.php?callback=?", {
    srsearch: q,
    action: "query",
    list: "search",
    format: "json"
  }, function(data) {
    $("#results").empty();
    $("#results").append("<p>Results for <b>" + q + "</b></p>");
    $.each(data.query.search, function(i, item) {
      $("#results").append("<div><a href='http://it.wikipedia.org/wiki/" + encodeURIComponent(item.title) + "'>" + item.title + "</a><br>" + item.snippet + "<br><br></div>");
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>





<button id='wiki' data-subject='whatever'>Search for:</button>
<output id='results'></output>