javascript - 如何根据文本框输入动态填充选择框

Question

我有一个文本框和一个选择框作为框。选择框值是根据另一个选择框中的选择通过 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 中实现这一点？

Answer 1

首先，正如其他人提到的，您应该看看 http://jqueryui.com/autocomplete这提供了一个很好的选择来完全按照您所描述的方式进行操作。

如果您不想使用插件，那么您可以执行以下操作:jsFiddle Demo

$(function() {

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

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

    });

});

n.b.这只是一个粗略的概念证明，在将其用于生产环境之前需要进行改进。