Creating a searchable dropdown menu for output function

Question

I need to create a searchable dropdown bar that will limit results in the dropdown menu based on the search query.

Something similar to this:

This is the code I have so far:

var stocks = [
  ['Apple', 141.63, 144.77, 90.34],
  ['Microsoft', 65.48, 65.78, 48.43]
];

$(".selectStock").each(function (){
  for (var i = 0, len = stocks.length; i < len; i++) {
 $("<option>").html(stocks[i][0]).attr("value", i).appendTo(this);
}
});

function r2d (i) {
  return Math.round(i * 100) / 100
}

$(".selectStock").change(updateAmount);
$("#numberOfStocks").on('keyup', updateAmount);

function updateAmount() {
  $(".selectStock").each(function () {
    index = Number($(this).val());
    if (isNaN(index)) {
      return;
    }
    amt = Number($("#numberOfStocks").val());
    if (isNaN(amt) || amt == 0) {
      amt = 1;
    }
    $(this).nextAll(".result:first").html("")
      .append("$" + r2d(amt*stocks[index][1]) + " per share<br />")
      .append("$" + r2d(amt*stocks[index][2]) + " high year<br />")
      .append("$" + r2d(amt*stocks[index][3]) + " low year<br />");
  });
}

.side {
  float:left;
  margin: 1%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>

  <input value="1" type="text" id="numberOfStocks" />
  <div style="display:block;">
    <div class="side">
    <select class="selectStock">
      <option>Pick a stock!</option>
    </select>
    <br>
    <br>
    <div class="result"></div>
    </div>
    <div class="side">
    <select class="selectStock">
      <option>Pick a stock!</option>
    </select>

    <br>
    <br>
    <div class="result"></div>
</div>
  </div>
</body>

Thoughts on how to do this with Javascript? Much appreciated.

If you're not opposed to using another plugin, I came across this just today: http://dbrekalo.github.io/fastselect/ — Waxi, Apr 12 '17 at 16:56

Jordan Davis · Accepted Answer · 2017-04-12T19:30:27.577

Use the keypress event to listen for user-input and filter on the dataset based on the user-input.

var stocks = [
  ['Apple', 141.63, 144.77, 90.34],
  ['Microsoft', 65.48, 65.78, 48.43]
];

init=()=>{
 //SELECT SEARCH INPUT & ADD KEYUP LISTENER ON SEARCHBOX
 document.querySelector('search > input').addEventListener('keyup',search.update);
}
search={
 clear:(o)=>{
   if(o.firstChild) while(o.firstChild) o.removeChild(o.firstChild)
   return true;  
 },
 update:(e)=>{
  //SEARCH VALUE
  var value = e.target.value;
  //FILTER RESULTS
  var results = stocks.filter((o)=>o[0].includes(value));
  //SELECT RESULTS CONTAINER
  var container = document.querySelector('search > results');
  //CLEAR EXISTING RESULTS
  search.clear(container);
  //LOOP THROUGH RESULTS APPEND NAMES
  results.forEach((o)=>{
   var item = document.createElement('item');
   //BIND EVENT CLICK EVENT LISTENER
   item.addEventListener('click',stock.display);
   //INSERT STOCK NAME
   item.innerHTML = o[0];
   //APPEND TO RESULTS TAG
   container.appendChild(item);
  });  
 }
}
stock={
 display:(e)=>{  
  var value = e.target.innerHTML;
  //FILTER RESULTS
  var results = stocks.filter((o)=>o[0].includes(value))[0];
  //REMOVE NAME FROM ARRAY (ie. Apple)
  results.shift();
  console.log(results);
  //SELECT DISPLAY TAGS & APPEND RESULTS
  results.forEach((o,i)=>document.querySelector('display').children[i].innerHTML = o);
 }
}
//ON DOCUMENT LOAD RUN INIT
document.addEventListener('DOMContentLoaded',init);

html{
 height: 100%;
 width: 100%;
}
html *{
 box-sizing: border-box;
 -webkit-font-smoothing: antialiased;
}
body{
 margin: 0 !important;
 
 height: 100%;
 width: 100%;
 
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center; 
 
 background: -webkit-radial-gradient(#41a3ff,#0273D4);
}
search{
 display: flex;
 flex-direction: column;
 width: 300px;

}
search > input{
 -webkit-appearance: none;
 background-color: white;
 padding: 0 .5em 0 .5em;
 height: 35px;
 width: 100%;
 outline: none;
  border-color: #0273D4;
 font-family: Roboto, sans-serif;
 border-radius: 0 !important;
 
}
search > results{
 display: flex;
 flex-direction: column;
 background-color: white;
 z-index: 100; 
}
search > results > item{
 display: flex;
 justify-content: center;
 align-items: center;
 padding: .25em 0;
 border-bottom: 1px solid #ccc;
 width: 100%;
  letter-spacing: -.1rem;
  font-family: "Lato", Helvetica, Arial, sans-serif;
}

display{
 margin: 2em 0 0 0;
 display: flex; 
}
display > *{
 color: white;
 margin: 0 .25em;
 line-height: 1.2;
  letter-spacing: -.1rem;
  font-family: "Lato", Helvetica, Arial, sans-serif;
  text-shadow: 0px 1px 3px #0273D4;
}

<search>
  <input type="search" placeholder="search for stock"></input>
  <results></results>
</search>
<display>
  <share></share>
  <high></high>
  <low></low>
</display>

Thanks a bunch for taking the time to do this- however do you know how to implement the bar with single mode select as a dropdown instead of having a search bar? — Dick Thompson, Apr 12 '17 at 21:53
@DickThompson yeah so just to be clear you want a dropdown instead of a search? — Jordan Davis, Apr 14 '17 at 02:49
Hey, I'm having trouble outputting values on this. Would you mind helping me out real quick? http://stackoverflow.com/questions/43476408/outputting-a-comparison-of-the-differences-between-2-arrays-in-javascript?noredirect=1#comment74009624_43476408 — Dick Thompson, Apr 18 '17 at 19:19
@DickThompson yeah can you mark the answer for this right at least, before moving on to the next? — Jordan Davis, Apr 18 '17 at 20:01

Creating a searchable dropdown menu for output function

1 Answers1