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

Question

我使用jquery文档有两个带有id和name的文本字段我已经成功实现了第一个文本框的自动完成现在我正在尝试当用户在第一个文本字段中键入值时相关的子产品需要显示第二个字段作为自动完成.

这是我的自动完成 HTML 代码

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

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

当前的 Jquery 代码

$(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
 });
});

这是 fiddle Link

请建议我该怎么做

Answer 1

按照代码所述将函数绑定(bind)到您的第一个输入框。这会起作用

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

参见 fiddle here