Reputation: 10611
I want to be able to click a button "wiki", get its value and run the search. I currently have this which starts searching as soon as you start typing.
<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>");
});
});
});
I would like to run the search after clicking an external button like:
<button class="wiki" type="submit" value="myValueSearchTerm">Wiki</button>
I know I can use:
$('.wiki').trigger('submit');
Yet how do I stop the current search, wait for the .wiki
button interaction and search for its value?
Upvotes: 0
Views: 352
Reputation: 44118
OP requests that instead of a text input that a button with an arbitrary value be placed there instead. (see Snippet 3).
Register click event to #search
button instead of the #searchterm
(see Snippet 1).
or
Register change event to #searchterm
instead of keyup.
$("#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>
$("#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>
$("#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>
Upvotes: 3
Reputation: 978
Remove the onkeyup
event, this will stop the auto searching functionality.
Change
$("#searchterm").keyup(function(e) {
to
$("#search").click(function(e) {
This will search only when you click the Search button.
or $("#wiki").click(function(e) {
(considering wiki is a button)
Also, you cannot use 'submit' event on '.wiki' button unless it's part of a form.
Upvotes: 0