我试图创建一个自动完成框,该框根据在预先键入文本框中键入的用户查询从 finance.yahoo.com 获取股票代码和名称。
我创建了一个quote_form.php页面,其中有一个文本框,我在其中应用 jquery keyup 函数来获取用户键入时的字符,然后根据该字符,我在 php 页面上的 typeahead 函数中发出了 get 请求,称为符号.php它反过来调用下面的链接:
http://d.yimg.com/aq/autoc?query=$search®ion=US&lang=en-US&callback=YAHOO.util.ScriptNodeDataSource.callbacks
在上面的链接中$search包含 get request 收到的字符,然后作为响应,我收到了带有一些垃圾的 JSON 数据,我清除了垃圾,然后将其设置为合法的 JSON 数据,然后从该 JSON 数据中创建了一个看起来像 javascript 数组的字符串,其中包含我需要的 JSON 字段。因此,当我的quote_form.php收到该数据时,它不会提前输入。我肯定会收到我在 chrome 的检查元素的"网络"选项卡中看到的数据。两个页面的代码如下所示,我创建了一个单独的 html 标题,所以我不会包含相同的内容,因为它不是必需的:
我已经包含了必要的javaScript文件和CSS文件:
使用的j查询版本:1.8.2
使用的引导版本:v2.2.1
quote_form.php
<script type ="text/javascript">
$(document).ready(function () {
var key;
$("input[name='symbol']").keyup(function() {
console.log("Key pressed");
window.key = $(this).val();
});
$("input[name='symbol']").typeahead({
source: function(query, process) {
return $.get('symbols.php', {s: window.key}, function(data) {
console.log(data);
return process(data);
});
}
});
});
</script>
<form action="quote.php" method="post">
<fieldset>
<div class="control-group">
<input id = "sy" autofocus autocomplete ="off" name="symbol" placeholder="Symbol" type="text"/>
</div>
<div class="control-group">
<button type="submit" class="btn">Get Quote</button>
</div>
</fieldset>
</form>
符号.php
<?php
$search = $_GET['s'];
$url = "http://d.yimg.com/aq/autoc?query=$search®ion=US&lang=en-US&callback=YAHOO.util.ScriptNodeDataSource.callbacks";
$raw_data = @file_get_contents($url);
$json = substr($raw_data, strpos($raw_data,'Result"') - 1);
$json = rtrim($json, '})');
$json = "{" . $json . "}";
$result = json_decode($json, true);
$jsarr = "[";
foreach($result as $symbols)
{
foreach($symbols as $symbol)
{
$jsarr .= "'".$symbol['name'] . " " . $symbol['symbol'] . "', ";
}
}
$jsarr .= "]";
echo $jsarr;
?>
我也尝试了上面的代码而不转换为 JavaScript 数组,即我也只尝试使用 JSON,但这也不起作用。在互联网上也看到了很多例子,但我仍然缺少一些不知道是什么的东西。如果有人能弄清楚我做错了什么,那对我来说将是一个很大的安慰。
提前谢谢。
Yahoo API 其实是返回一个 JSONP 回调,你可以通过直接从 jquery 发出jsonp
请求来避免解析,你只需要构建回调中指定的 YAHOO 对象:
var $typeaheadInput = $("input[name='symbol']");
$typeaheadInput.typeahead({
source: function (query, process) {
return $.ajax({
url: 'http://d.yimg.com/aq/autoc?query=' + query + '®ion=US&lang=en-US',
dataType: 'jsonp',
jsonpCallback: 'YAHOO.util.ScriptNodeDataSource.callbacks'
});
}
});
//Build YAHOO object with callback function
YAHOO = {
util: {
ScriptNodeDataSource: {
callbacks: function (data) {
var sourceArray = $.map(data.ResultSet.Result, function (elem) {
return elem.name + ' - ' + elem.symbol;
});
$typeaheadInput.data('typeahead').process(sourceArray);
}
}
}
};
这是一个工作小提琴
注意:我从输入中删除了 autofocus
属性,因为它会导致预键入下拉列表出现问题