如果输入文本不在数据列表中，则禁用提交

Question

如果在此输入中输入的文本不在 datalist 中，我想禁用此提交按钮。

<label><h5>Code application</h5></label>
<input
  name="applicationCodeId"
  id="applicationCodeId"
  list="applicationCodeList"
  class="disableAutoComplete"
/>
<datalist id="applicationCodeList">
  <div th:each="applicationCode : ${applicationCodes}">
    <option
      name="applicationCodeId"
      th:text="${applicationCode.applicationCodeName}+ ' : ' +${applicationCode.projectName}"
      th:value="${applicationCode.getId()}"
    ></option>
  </div>
</datalist>

Answer 1

你可以依赖提交的disabled属性button/input：每次修改输入内容时更新它。一个选项是使用 querySelector 检查当前文本是否与选择器 option[value="..."] 的选项值匹配。类似的东西：

function myFunction() {
  const currentValue = document.getElementById('applicationCodeId').value;
  document.getElementById("mySubmit").disabled =
    currentValue.length === 0 ||
    document.querySelector('option[value="' + currentValue + '"]') === null;
}

<label><h5>Code application</h5></label>
<input
  name="applicationCodeId"
  id="applicationCodeId"
  list="applicationCodeList"
  class="disableAutoComplete"
  oninput="myFunction()"
/>
<datalist id="applicationCodeList">
  <option value="Option 1">
  <option value="Option 2">
</datalist>
<input type="submit" id="mySubmit" disabled>

请注意，使用 <datalist> 时，选项值优先于文本：您可以在输入框内键入文本，但它会被值替换。这就是为什么上述解决方案基于值:)

请注意，数据列表应仅包含 <option> 个元素：无 <div>（参见 documentation）。也可以在选项中删除名称。

因为上面的解决方案适用于 value 属性，您的代码可能会变成：

<datalist id="applicationCodeList">
  <option
    th:each="applicationCode : ${applicationCodes}"
    th:value="${applicationCode.applicationCodeName}+ ' : ' +${applicationCode.projectName}"
  >
</datalist>

您必须在服务器端检索 ID ;)

如果输入文本不在数据列表中，则禁用提交

Disable submit if input text is not in datalist

javascript

input

submit

datalist