![](/img/trans.png)
[英]How can I get a search filter to loop through MULTIPLE data types in a stock items table, and narrow down what results displayed?
[英]How can I update Stock Quote API to take in search results?
这是我对StackOverflow的第一个问题。 我正在研究如何使用API进行学校作业,并且发现了一个API(可从Markit按需提供)返回股票报价-但我不知道如何更新JS以查询来自DOM的搜索结果。 现在,它仅在搜索预定义的“ AAPL”符号-如何更新JS以查询搜索结果? 谢谢!
/** * Version 1.0, Jan 2012 */ var Markit = {}; /** * Define the QuoteService. * First argument is symbol (string) for the quote. Examples: AAPL, MSFT, JNJ, GOOG. * Second argument is fCallback, a callback function executed onSuccess of API. */ Markit.QuoteService = function(sSymbol, fCallback) { this.symbol = sSymbol; this.fCallback = fCallback; this.DATA_SRC = "http://dev.markitondemand.com/Api/v2/Quote/jsonp"; this.makeRequest(); }; /** * Ajax success callback. fCallback is the 2nd argument in the QuoteService constructor. */ Markit.QuoteService.prototype.handleSuccess = function(jsonResult) { this.fCallback(jsonResult); }; /** * Ajax error callback */ Markit.QuoteService.prototype.handleError = function(jsonResult) { console.error(jsonResult); }; /** * Starts a new ajax request to the Quote API */ Markit.QuoteService.prototype.makeRequest = function() { //Abort any open requests if (this.xhr) { this.xhr.abort(); } //Start a new request this.xhr = $.ajax({ data: { symbol: this.symbol }, url: this.DATA_SRC, dataType: "jsonp", success: this.handleSuccess, error: this.handleError, context: this }); }; new Markit.QuoteService("AAPL", function(jsonResult) { //Catch errors if (!jsonResult || jsonResult.Message){ console.error("Error: ", jsonResult.Message); return; } //If all goes well, your quote will be here. console.log(jsonResult); //Now proceed to do something with the data. $(".results").first().append("<p>Name: " + jsonResult.Name + "</p> <p>Symbol: " + jsonResult.Symbol + "</p><p>Last Price: " + jsonResult.LastPrice + "</p><p>Change: " + jsonResult.Change + "</p>"); /** * http://dev.markitondemand.com */ });
<!doctype html> <html> <head> <script src="jquery.min.js"></script> <script src="script.js"></script> </head> <body> <form id = "searchWrap"> Search Stocks <input type = "text" id = "stock_search"> </form> <button class="submit">submit</button> <div class = "results"> </div> </body> </html>
Markit.QuoteService是这里的主要内容,您必须向其传递2个参数1引用2是函数回调,以防它设法提取数据
在代码中添加以下功能
function submitForm(){
stock = $('#stock_search').val();
Markit.QuoteService(sock,drawHtml);
return false;
}
function drawHtml(jsonResult){
$(".results").first().append("<p>Name: " + jsonResult.Name + "</p> <p>Symbol: " + jsonResult.Symbol + "</p><p>Last Price: " + jsonResult.LastPrice + "</p><p>Change: " + jsonResult.Change + "</p>");
}
添加到表单onsubmit事件
<form onsubmit="return submitForm();">
没有Markit内容的完整工作示例:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<title></title>
</head>
<body>
<form action="" onsubmit="return submitForm()">
Search Stocks
<input name="stock" type="text" id="stock_search" />
<input type="submit" value="submit">
</form>
<div id="results">
</div>
<script type="text/javascript">
function getStock(stock) {
$.ajax({
url: 'http://dev.markitondemand.com/Api/v2/Quote/jsonp',
data: {'symbol': stock},
jsonp: "callback",
dataType: "jsonp",
success: function(ds){
drawHtml(ds);
}
});
return false;
}
function submitForm() {
stock = $('#stock_search').val();
getStock(stock);
return false;
}
function drawHtml(jsonResult) {
$("#results").append("<p>Name: " + jsonResult.Name + "</p> <p>Symbol: " + jsonResult.Symbol + "</p><p>Last Price: " + jsonResult.LastPrice + "</p><p>Change: " + jsonResult.Change + "</p>");
return false;
}
</script>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.