如何根據文本框輸入動態填充選擇框

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”。

如果我在txt框中再次輸入“ 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();

    });

});

注意，這僅僅是概念上的粗略證明，在生產環境中使用它之前，需要對其進行完善。