如何限制數據列表中的用戶輸入？

Question

我正在嘗試制作一個包含航班列表的網頁，該列表可以按目的地、出發地、價格等進行過濾。為此，我將每個航班放入一個 div 中，並將其屬性作為其類。 例如，目的地為美國、起飛時間為下午 2:40 且價格為 300 美元的航班將被標注為

<div class = flight America 240PM 300> *Insert descriptive text here* </div>

但是，我意識到通過這種方式，人們可以通過在價格輸入部分放置“美國”來過濾航班，因為無法區分價格 class 和目的地 class。 因此，我想知道如何限制用戶在每個輸入部分的輸入。 我一直在嘗試使用具有自由格式文本的數據列表來實現這一點，這樣用戶就不必無休止地向下滾動以找到他們想要過濾的特定航空公司或目的地，但這允許他們完全輸入自定義過濾器（如https://jsfiddle.net/5mwo6agb/3/中所示）。 如何將用戶輸入限制為僅數據列表中可用的選項，同時仍允許他們在文本框中鍵入以過濾他們的選擇？

（另外，如果我這樣做的方式完全錯誤，請隨時通知我，因為我仍然是 javascript 和 html 的新手）。

Answer 1

Ciao，您可以在輸入上使用onchange事件來驗證用戶是否以這種方式插入了包含在您的選項中的值：

<input type="text" list = "combo-airlines" id="airline" placeholder="Select an Airline" name = "airline" style = "font-size:20px;" onchange="get_data(this)"/>

那么get_data function 將是：

get_data = function(elem) {
  var options = document.getElementById('combo-airlines').getElementsByTagName('option');
  var optionVals = [],
    i = 0;

  for (i; i < options.length; i += 1) {
    optionVals.push(options[i].value);
  }

  if (optionVals.indexOf(elem.value) > -1) {
    console.log(elem.value);
  }
  else {
    console.log("wrong answer")
  }
}

在這里你的小提琴修改了。