Javascript 如何基于文本框输入动态填充选择框

我有一个文本框和一个选择框作为框。基于另一个选择框中的选择，通过ajax调用加载选择框值。现在，我的要求是在文本框中输入值时，根据输入，我的选择框应显示值

<form:input id="txtBox"></form:input>

<form:select id="selectBox" path="selectedValue">
  <form:option value="0">Anand</form:option >
  <form:option value="1">Arun</form:option >
  <form:option value="2">Ananya</form:option >
  <form:option value="3">babu</form:option >
</form:select>

阿南德
阿伦
阿纳亚
巴布

现在，我在文本框中输入“a”，选择框应填充“Anand”、“Arun”、“Ananya”

如果我在文本框中再次输入“n”，则应列出“Anand”和“Ananaya”

如果我在文本框中输入的字母不在选择框中，则选择框应为空

---

如何在Jquery中实现这一点？

首先，正如其他人所提到的，您应该看看哪个选项提供了一个很好的选项来完成您所描述的工作

如果您不想使用插件，则可以执行以下操作：

---

n、 b.这只是一个粗略的概念证明，在生产环境中使用它之前，需要对其进行细化。

您可以使用jquery ui autocomplete使用jquery autocomplete，您可以通过ajax调用来处理它。在每个keyup事件中将输入文本传递到后端，并从后端筛选数据并获得响应。使用后端数据动态更新选择选项。

$(function() {

    $('input[type=text]').keyup(function() {

        $('select option:contains("' + $('input[type=text]').val() + '")').show().siblings().hide();

    });

});