title: How to get list symbols via keyword?
body: <p>I have seen on site <a href="https://www.tradingview.com/chart/" rel="nofollow">tradingview.com/chart</a> and I would like create a search bar like search bar in tradingview site. I have tried to get list stock in yahoo finance but I feel it is not enough. Here is my code.</p>
  
  <p>js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script type="text/javascript"&gt;
    $(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 + "&amp;region=US&amp;lang=en-US&amp;row=ALL&amp;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("&lt;li style='cursor: pointer'&gt;&lt;span class='result_key' style='width:40%; display:inline-block;'&gt;" + value.symbol + "&lt;/span&gt;&lt;span class='result_name' style='width: 60%;display: inline-block;'&gt;" + value.name + "&lt;/span&gt;&lt;/li&gt;")
                  });
                  $(".search_stock_results").fadeIn();
              }
          })
      });
  });
  &lt;/script&gt;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>&lt;style&gt;
          #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 &gt; 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 &gt; li.active &gt; a, .nav-tabs &gt; li.active &gt; a:hover, .nav-tabs &gt; li.active &gt; a:focus {
              border-bottom: 3px solid green !important;
              color: #555 !important;
              cursor: default;
          }
  
          .nav-tabs &gt; li &gt; a {
              border:none !important;
          }
  
          .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
              color: #333;
              text-decoration: none;
          }
  
          .nav &gt; li &gt; a:hover, .nav &gt; li &gt; a:focus {
              background: rgba(0, 0, 0, 0) none repeat scroll 0 0 !important;
              text-decoration: none;
          }
  
      &lt;/style&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="input-group"&gt;
    &lt;input type="text" class="form-control box-corner" id="searchStock"/&gt;
  &lt;/div&gt;
  &lt;div class="search_stock_results" style="display: none;"&gt;
      &lt;ul class="nav nav-tabs"&gt;
          &lt;li class="active"&gt;&lt;a data-toggle="tab" href="#all"&gt;All&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a data-toggle="tab" href="#stock"&gt;Stock&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a data-toggle="tab" href="#futures"&gt;Futures&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a data-toggle="tab" href="#forex"&gt;Forex&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a data-toggle="tab" href="#cfd"&gt;CFD&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a data-toggle="tab" href="#bitcoin"&gt;Bitcoin&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a data-toggle="tab" href="#index"&gt;Index&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a data-toggle="tab" href="#economy"&gt;Economy&lt;/a&gt;&lt;/li&gt;
          &lt;li style="float: right" id="allex"&gt;&lt;a href="#"&gt;All exchanges &lt;i class="fa fa-caret-down"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;div class="tab-content" style="margin-top:0 !important;"&gt;
          &lt;div id="all" class="tab-pane fade in active"&gt;
              &lt;ul class="list_results" style="height:150px;overflow-y:scroll"&gt;&lt;/ul&gt;
          &lt;/div&gt;
          &lt;div id="stock" class="tab-pane fade"&gt;
              &lt;ul class="list_results" style="height:150px;overflow-y:scroll"&gt;&lt;/ul&gt;
          &lt;/div&gt;
          &lt;div id="futures" class="tab-pane fade"&gt;
              &lt;h3&gt;Menu 2&lt;/h3&gt;
              &lt;p&gt;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.&lt;/p&gt;
          &lt;/div&gt;
          &lt;div id="cfd" class="tab-pane fade"&gt;
              &lt;h3&gt;Menu 3&lt;/h3&gt;
              &lt;p&gt;Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.&lt;/p&gt;
          &lt;/div&gt;
          &lt;div id="bitcoin" class="tab-pane fade"&gt;
              &lt;h3&gt;Menu 2&lt;/h3&gt;
              &lt;p&gt;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.&lt;/p&gt;
          &lt;/div&gt;
          &lt;div id="index" class="tab-pane fade"&gt;
              &lt;h3&gt;Menu 3&lt;/h3&gt;
              &lt;p&gt;Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.&lt;/p&gt;
          &lt;/div&gt;
          &lt;div id="economy" class="tab-pane fade"&gt;
              &lt;h3&gt;Menu 3&lt;/h3&gt;
              &lt;p&gt;Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>