Bootstrap typehead不能正常工作

我從jQuery對象中提取雅虎財經的股票代碼，並試圖在用戶開始在搜索框中輸入公司名稱或符號時將其顯示爲下拉菜單。 Typeahead不能作爲搜索框中的下拉菜單。我認爲我做的一切都是正確的。這是我迄今爲止的代碼。任何幫助表示讚賞。Bootstrap typehead不能正常工作

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>

suggest.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']}&region=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]); 
} 

?>

來源

2013-04-01 tironci

事先鍵入的內容只需要一個字符串數組作爲源

// i.e. 
    ["INTC", "GOOG", "FB", /* etc */]

你的腳本做的就是創建一個雅虎返回

// 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 */ 
    ]

你需要做的全部對象的數組是變化你的建議.php，以便行：

foreach ($json->ResultSet->Result as $stock) 
     $result[] = $stock;

成爲例如：

foreach ($json->ResultSet->Result as $stock) 
     $result[] = '('.$stock->symbol.') '.$stock->name;

來源

2013-04-05 17:53:37

這很好。謝謝。還有一個問題。我如何得到所選值的符號以便將其傳遞給查找函數。我有這個'var symbol = $（'＃form-quote input [name = symbol]'）.val（）;'但它得到了整個事物符號和公司名稱。 – tironci

那麼有幾種方法。您可以返回一個對象而不是一個數組，並且在JS函數中可以將其轉換爲數組，然後使用原始對象來查找值。這是更復雜的方式。簡單的方法是遵循**「（symbol）name」**這樣的值中的「模式」，並且只能匹配符號，如'var symbol = new String（$（'＃form-quote input [ val（））replace（/^\（\ s *（[A-z0-9 \。\ - ] +）\ s * \）。* $/gi，'$ 1' ）;'這段代碼只能得到字符串中的符號（無論是圓括號）。 –

謝謝。我所做的就是去掉括號，直到第一個空格。我會試一試，看看它是如何工作的。 – tironci

嘗試在這樣的Ajax中添加URL的完整路徑localhost/app/user/suggest.php

來源

2013-04-01 13:40:16 pramodhkumar

確保在使用json_encode做出響應之前將「Content-type」設置爲json。

header("Content-type: application/json");

來源

2013-04-01 13:42:44

application/json，而不是text/json。 http://stackoverflow.com/questions/477816/what-is-the-correct-json-content-type – ceejayoz

我添加了'header（「Content-type：application/json」）;'就在說'echo json_encode（['symbols'=> $ result]）的行之前;''仍然無法工作。 – tironci

@tironci你必須在任何迴應之前添加，而不是在行之前。 –

愚蠢的問題，但JSON結果你期待，正確做到這一點翻盤預輸入取出式的，即使？因爲傳遞給file_get_contents的值可能會有些拙劣，除非在這裏粘貼的時候格式化的文件被轟炸了。

來源

2013-04-03 04:16:59

Bootstrap typehead不能正常工作

回答

相關問題