自动完成下拉菜单

Question

我想在CF7中创建一个自动完成下拉列表字段。假设我对此下拉字段有5种可能的选择，例如：1）伦敦2）巴黎3）罗马4）马德里5）伦敦东在前端HTML中是：

<select name="natoa" class="wpcf7-form-control wpcf7-select" aria-invalid="false">
<option value="">---</option>
<option value="London">London</option>
<option value="Paris">Paris</option>
<option value="Rome">Rome</option>
<option value="Madrid">Madrid</option>
<option value="London East">London East</option>
</select>

如果输入三个字母，例如“ LON”，那么在下拉字段中，我只能找到“ London”或“ London East”作为选项。如果输入“ PAR”，则仅显示“ Paris”，如果输入“ BRA”，则不会显示任何内容。因为这是一个选择标记，所以现在我根本无法键入任何内容，因此应该进行其他处理才能实现结果。

您知道如何实现吗？

Answer 1

您可以使用jQuery chosen()执行此操作。

在您的html中实现这些脚本标签（第一个用于jQuery，第二个用于选择）。

<script src="https://code.jquery.com/jquery-3.5.1.js"
    integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>

我为您的选择元素指定了id="complete"的ID，并使用jQuery选择了它。调用它的chosen()函数应该会给您想要的结果。

$(document).ready(() => {
    $('#complete').chosen();
})

我希望这可行。