Question

我正在尝试创建一个自动完成框，根据在先前文本框中输入的用户查询，从finance.yahoo.com获取股票代码和名称。

我创建了一个 quote_form.php 页面，其中有一个文本框，我在其上应用了jquery keyup函数来获取用户输入的字符，然后基于我获得的字符在我的php页面上名为 symbols.php 的我的预先输入函数内请求，其中调用以下链接：

http://d.yimg.com/aq/autoc?query= $搜索＆安培;区域= US＆安培; LANG =的en-US＆安培;回调= YAHOO.util.ScriptNodeDataSource.callbacks

在上面的链接中，$ search包含get请求收到的字符，然后作为响应，我收到了一些垃圾的JSON数据，我清除了垃圾，然后将其作为合法的JSON数据，并从该JSON数据创建了一个字符串，喜欢javascript数组与我需要的JSON字段。因此，当我的 quote_form.php 收到该数据时，它不会在typeahead中显示它。我肯定会收到我在chrome的inspect元素的Network选项卡中看到的数据。这两个页面的代码如下所示，我创建了一个单独的html标题，所以我不会包含相同的内容，因为它没有必要：

我已经包含了必要的javaScript文件和CSS文件：

使用的jquery版本：1.8.2

使用的Bootstrap版本：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>

symbols.php

<?php
    $search = $_GET['s'];

    $url = "http://d.yimg.com/aq/autoc?query=$search&region=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，但这也没有用。在互联网上看到很多例子，但我仍然缺少一些不知道的东西。如果任何一个身体能够弄清楚我做错了什么，这对我来说是一个很大的安慰。

提前致谢。

Answer 1

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 + '&region=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);
            }
        }
    }
};

这是 working fiddle

注意：我从输入中删除了autofocus属性，因为它导致了输入前进下拉列表的问题

Bootstrap typeahead不能使用从php页面检索的动态数组

1 个答案: