如何限制数据列表中的用户输入？

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

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