Stock Autocomplete

by Thomas Wolfe

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<div class="col-md-6 col-xs-12 col-md-offset-3">
  <div class="input-group">
    <select type="text" class="form-control" id="stockNames" placeholder="Start Typing Name or Symbol (i.e. AAPL)"></select>
    <span class="input-group-btn">
          <br><button class="btn btn-default" id="symbolSearch">Search</button>
        </span>
  </div>
</div>
<div>
  <ul id="searchOutput">
    
  </ul>
  
</div>

CSS

body {
  padding-top: 40px;
}

JavaScript

'use strict';
$('#symbolSearch').on('click', () =>{
	let symbols = $('#stockNames').val();
  console.log(symbols);
  let output = [];
  
  symbols.map(symbol => {
  	let $li = $('<li>');
    $li.text(symbol);
    output.push($li);
  });
 	
  $('#searchOutput').empty().append(output);
 
 })
 
 
 var searchURL = 'https://search.xignite.com/Search/Suggest?parameter=XigniteFinancials.GetCompanyBalanceSheet.Identifier';
 
 $('#stockNames').select2({
   placeholder: "Type in the compaines you would like to compare",
   tags: true, //select2 option, allows us to use field tags
   multiple: true, //makes it so only 1 input box appears
   minimumInputLength: 1, //allows you to controll when the API calls start
   ajax: {
     url: searchURL,//the URL for the API
     dataType: "json",//data type of the response
     data: function(params) {  //params is the input from the text box
			//console.log(params);
       return {
         term: params.term //attaches the 'term=' (i.e. "Apple") to the end of the query string
       }

     },
     processResults: function(data) {  //process the JSON resoponse
     //console.log(data);
       return {
         results: $.map(data.Results, function(item) {
           return {
             text: item.Text,
             id: item.Value   
           }
         })
       };
     }
   },

   cache: true
 });