Question

我需要创建一个可搜索的下拉栏，根据搜索查询限制下拉菜单中的结果。

类似于此的内容：

这是我到目前为止的代码：

＆＃13;

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 />");
  });
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

关于如何使用Javascript执行此操作的想法？非常感激。

Answer 1

使用keypress事件根据用户输入监听数据集上的用户输入和filter。

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>

为输出功能创建可搜索的下拉菜单

1 个答案: