如何通过关键字获取列表符号?

时间:2015-10-23 10:02:50

标签: symbols yahoo yql finance stock

我在网站tradingview.com/chart上看到过,我想在tradeview网站上创建一个搜索栏,就像搜索栏一样。我试图在雅虎财务中获得名单股票,但我觉得这还不够。这是我的代码。

JS

<script type="text/javascript">
  $(document).ready(function(){
  $("#searchStock").keyup(function () {
        alert("a");
        var temp = $("#searchStock").val();
        $.ajax({
            type: "get",
            dataType: 'jsonp',
            jsonpCallback: temp,
            crossDomain: true,
            url: "http://d.yimg.com/autoc.finance.yahoo.com/autoc?query=" + temp + "&region=US&lang=en-US&row=ALL&callback=" + temp,
            success: function (data, status, xhr) {
                //console.log(data.ResultSet.Result);
                $(".list_results").html("");
                $.each(data.ResultSet.Result, function (key, value) {
                    $(".list_results").append("<li style='cursor: pointer'><span class='result_key' style='width:40%; display:inline-block;'>" + value.symbol + "</span><span class='result_name' style='width: 60%;display: inline-block;'>" + value.name + "</span></li>")
                });
                $(".search_stock_results").fadeIn();
            }
        })
    });
});
</script>
<style>
        #resizable-4 {
            /*max-width:1822px;*/
            background:#f3f3f3;
            height:951px;
            position: relative;
        }

        #searchStock{
            background-color: white;
            border: 1px solid #eee;
            color: #524f4f;
            font-size: 13px;
            font-weight: 600;
            height: 28px;
            padding: 0 0 0 7px;
            width: 80px;
            text-transform: uppercase;
        }
        .list_results {
            margin-bottom: 10px;
            margin-left: 0 !important;
            margin-right: 10px;
            margin-top: 10px;
        }

        .search_stock_results {
            background: #fff none repeat scroll 0 0;
            border: 1px solid #ddd;
            margin-top: 2px;
            position: absolute;
            width: 48%;
            top:45px;
        }

        .list_results > li {
            color: black;
            font-weight: normal;
            line-height: 30px;
            list-style: outside none none;
        }

        #allex a:hover
        {
            background: none !important;
            border: none !important;
        }

        .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
            border-bottom: 3px solid green !important;
            color: #555 !important;
            cursor: default;
        }

        .nav-tabs > li > a {
            border:none !important;
        }

        .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
            color: #333;
            text-decoration: none;
        }

        .nav > li > a:hover, .nav > li > a:focus {
            background: rgba(0, 0, 0, 0) none repeat scroll 0 0 !important;
            text-decoration: none;
        }

    </style>
<div class="input-group">
  <input type="text" class="form-control box-corner" id="searchStock"/>
</div>
<div class="search_stock_results" style="display: none;">
    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#all">All</a></li>
        <li><a data-toggle="tab" href="#stock">Stock</a></li>
        <li><a data-toggle="tab" href="#futures">Futures</a></li>
        <li><a data-toggle="tab" href="#forex">Forex</a></li>
        <li><a data-toggle="tab" href="#cfd">CFD</a></li>
        <li><a data-toggle="tab" href="#bitcoin">Bitcoin</a></li>
        <li><a data-toggle="tab" href="#index">Index</a></li>
        <li><a data-toggle="tab" href="#economy">Economy</a></li>
        <li style="float: right" id="allex"><a href="#">All exchanges <i class="fa fa-caret-down"></i></a></li>
    </ul>
    <div class="tab-content" style="margin-top:0 !important;">
        <div id="all" class="tab-pane fade in active">
            <ul class="list_results" style="height:150px;overflow-y:scroll"></ul>
        </div>
        <div id="stock" class="tab-pane fade">
            <ul class="list_results" style="height:150px;overflow-y:scroll"></ul>
        </div>
        <div id="futures" class="tab-pane fade">
            <h3>Menu 2</h3>
            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
        </div>
        <div id="cfd" class="tab-pane fade">
            <h3>Menu 3</h3>
            <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
        </div>
        <div id="bitcoin" class="tab-pane fade">
            <h3>Menu 2</h3>
            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
        </div>
        <div id="index" class="tab-pane fade">
            <h3>Menu 3</h3>
            <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
        </div>
        <div id="economy" class="tab-pane fade">
            <h3>Menu 3</h3>
            <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
        </div>
    </div>
</div>

0 个答案:

没有答案