使用输入过滤器在长下拉列表中搜索项目，但只允许用户从下拉列表中提交选项答案

【问题标题】：search for item in long dropdown list with input filter, but only allow user to submit options from dropdown使用输入过滤器在长下拉列表中搜索项目，但只允许用户从下拉列表中提交选项
【发布时间】：2021-09-05 13:25:41
【问题描述】：

我的代码下拉列表中有一个很长的列表（超过 3k+ 个选项）。由于我的下拉列表很长，我决定使用数据列表，以便用户可以通过输入更轻松地过滤下拉列表。这样他们就不必滚动浏览所有 3k 选项。

我想让它让用户可以过滤它，但不能输入/使用不在下拉列表中的值。 IE 输入值将是下拉列表中的一个选项，或者什么都没有。我不知道该怎么做。

例如，他们可以键入颜色 John，但是一旦他们离开输入，因为 John 不在下拉列表中并且他们没有从下拉列表中选择它，一旦他们点击提交，该值将为空。但是，如果他们搜索蓝色并单击蓝色，则输入值仍将是蓝色，因为它位于数据列表下拉选项中。

提前致谢。

   
   <form method = "POST">
   <input class="form-control" type="text" id="color"  list="colors_data" autocomplete = "off">
                            <datalist id="colors_data"style = "width:800px">
                              <option value="red"></option>
                              <option value="orange"></option>
                              <option value="green"></option>
                              <option value="blue"></option>
                            </datalist>
  <input type = "submit" value = 'send_request'>
  </form>

【问题讨论】：

你考虑过类似jQuery autocomplete的东西吗？
是的，我认为。正在考虑使用它，但是使用该 Jquery 自动完成功能我仍然会遇到同样的问题。用户将能够选择自动完成中没有的选项。我想要它，以便用户在自动完成中只有一个选项
您可以锁定它，因此唯一的选择是从自动完成中进行选择。更多here
如果值不是选项而是空字符串，您是要提交表单，还是根本不想提交表单？
@Andy 我希望用户根本不提交表单。

标签： javascript html jquery

【解决方案1】：

从选项值中获取所有颜色的数组并检查您的输入值是否包括在内。

// Cache the elements
const options = document.querySelectorAll('option');
const form = document.querySelector('form');
const input = document.querySelector('#color');
const submit = document.querySelector('[type="submit"]');

// Add an click listener to the submit button
submit.addEventListener('click', handleSubmit, false);

// Iterate over the options with `map` and return a
// new array of colour values
const colors = Array.from(options).map(el => el.value);

function handleSubmit(e) {

  // Prevent the form from submitting
  e.preventDefault();

  // Check to see if the input value is included
  // in the colours array
  if (colors.includes(input.value)) {

    // If it is submit the form
    console.log('Found');
    // form.submit();
  } else {

    // Otherwise do nothing
    console.log('Not found');
  }
}

<input class="form-control" type="text" id="color" list="colors_data" autocomplete="off">
<datalist id="colors_data" style="width:800px">
  <option value="red"></option>
  <option value="orange"></option>
  <option value="green"></option>
  <option value="blue"></option>
</datalist>
<input type="submit" value='send_request'>

注意，如果您不想写出所有 HTML，您可以使用数组以编程方式构建选项，并使用模板字符串来创建标记。然后你就不必再去检查一个单独的颜色数组了，因为你已经有了一个。

const colors = ['red', 'orange', 'green', 'blue'];

// Iterate over the colour array to produce an array of strings
// that you then join into one string
function getOptions(arr) {
  return arr.map(el => `<option value=${el}>${el}</option>`).join('');
}

// Grab the datalist element
const datalist = document.querySelector('datalist');

// And insert the options
datalist.insertAdjacentHTML('beforeend', getOptions(colors));

&lt;datalist /&gt;

其他文档

【讨论】：