How to get list symbols via keyword? - symbols

Question

I have seen on site tradingview.com/chart 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.
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">All exchanges <i class="fa fa-caret-down"></i></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>