[英]Bootstrap typeahead not working
我正在從Yahoo財務中的json對象中提取股票代碼,並試圖在用戶開始在搜索框中輸入公司名稱或代碼時將它們顯示為下拉菜單。 Typeahead不能用作搜索框中的下拉菜單。 我認為我做的一切都正確,這是我到目前為止的代碼。 任何幫助表示贊賞。
quote.js
$(document).ready(function() {
// create autocomplete
$('#form-quote input[name=symbol]').typeahead({
// load autocomplete data from suggest.php
source: function(query, callback) {
$.ajax({
url: '../suggest.php',
type: 'POST',
dataType: 'json',
data: {
symbol: query
},
success: function(response) {
callback(response.symbols);
}
});
}
});
// load data via ajax when form is submitted
$('#form-quote').on('click', function() {
// determine symbol
var symbol = $('#form-quote input[name=symbol]').val();
// send request to quote.php
$.ajax({
url: 'quote.php',
type: 'POST',
data: {
symbol: symbol
},
success: function(response) {
$('#price').text(response);
}
});
return false;
});
});
quote.php
<?php
//configuration
require("../includes/config.php");
//if form was submitted
if($_SERVER["REQUEST_METHOD"] == "POST"){
$stock = lookup(strtoupper($_POST["symbol"]));
if(empty($_POST["symbol"])){
//echo "You must enter a stock symbol";
}else if($_POST["symbol"]){
$price = number_format($stock['price'], 2);
echo "A share of {$stock['name']} costs $$price";
}
}
else{
// render portfolio
render("stock_search.php", ["title" => "Get Quote"]);
}
?>
quote_search.php
<form id = "form-quote" action="quote.php" method="post">
<fieldset>
<div class="control-group">
<input name="symbol" autofocus autocomplete="off" placeholder="Symbol" type="text"/>
</div>
<div class="control-group">
<button type="submit" class="btn">Get Quote</button>
</div>
</fieldset>
<div id="price"></div>
<div id="suggestions"></div>
</form>
<script type="text/javascript" src="js/quote.js" ></script>
proposal.php
<?php
// configuration
require("../includes/functions.php");
// if form was submitted
if ($_SERVER["REQUEST_METHOD"] == "POST")
{
// load suggestion data
$data = @file_get_contents("http://d.yimg.com/aq/autoc?query= {$_POST['symbol']}®ion=US&lang=en-US&callback=YAHOO.util.ScriptNodeDataSource.callbacks");
// parse yahoo data into a list of symbols
$result = [];
$json = json_decode(substr($data, strlen('YAHOO.util.ScriptNodeDataSource.callbacks('), -1));
foreach ($json->ResultSet->Result as $stock)
$result[] = $stock;
echo json_encode(['symbols' => $result]);
}
?>
提前輸入僅將字符串數組作為源
// i.e.
["INTC", "GOOG", "FB", /* etc */]
您的腳本要做的是創建Yahoo返回的整個對象的數組
// i.e.
[
{"symbol":"INTC","name": "Intel Corporation","exch": "NMS","type": "S","exchDisp":"NASDAQ","typeDisp":"Equity"},
{"symbol":"INTC.MX","name": "Intel Corporation","exch": "MEX","type": "S","exchDisp":"Mexico","typeDisp":"Equity"},
/* etc */
]
您需要做的是更改您的proposal.php,以使該行:
foreach ($json->ResultSet->Result as $stock)
$result[] = $stock;
例如:
foreach ($json->ResultSet->Result as $stock)
$result[] = '('.$stock->symbol.') '.$stock->name;
嘗試在Ajax中添加URL的完整路徑,例如localhost/app/user/suggest.php
在使用json_encode進行響應之前,請確保將“ Content-type”設置為json。
header("Content-type: application/json");
愚蠢的問題,但您期望的json結果,即使從等式中提前輸入,也可以正確恢復嗎? 因為傳遞給file_get_contents的值可能會被破壞一點,除非在粘貼到此處時炸毀了該格式。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.