基于第一个字段值的自动完成jQuery两个字段需要在第二个字段中填充为自动完成

Question

I have two text fields with id and name using jquery documentation I have succesfully achieved autocomplete for first text box now I am trying when the user type the value in first text field the relevant sub products needs to be shown second field as autocomplete.

Here Is my HTML code for auto complete

<input type="text" id="Product" name="Product"/>

<input type="text" id="subProduct" name="subProduct"/>

Jquery code for the current one

$(function() {
var availableItem = [
    "Fruits",
    "Vegetables",
    "Accesories"
];
var availableItem1 = [
    "Apple",
    "Strawberies",
    "Grapes"
];
 var availableItem2 = [
    "Potato",
    "LadiesFinger",
    "BitterGuard"
];
var availableItem3 = [
    "Headset",
    "Mouse",
    "Keyboard"
];  
  $("#Product").autocomplete({
    source:availableItem
  });
  $("#subProduct").autocomplete({
    source:availableItem
 });
});

Here is the fiddle Link

Kindly suggest me how do this

Answer 1

Bind function to your first input box as the code described. This will work

$("#Product").on('input change keyup autocompletechange',function(){
    if(availableItem.indexOf($("#Product").val()) != -1){
        $("#subProduct").autocomplete({
            source:eval('availableItem'+(availableItem.indexOf($("#Product").val())+1).toString())
        });
    }
});

See fiddle here

Answer 2

这是在StackoverFlow上已经给出的解决方案，它将显示如何在更改后附加值。