Javascript 同一源多字段的jQuery自动完成-简单函数

我正在处理一个函数prepareAutocompletepath，它是一个js文件中的idArray，在整个应用程序中都可以使用。因此，每当我希望字段具有自动完成功能时，它将如下所示：

HTML:

我的prepareAutocomplete函数现在如下所示：

var autoCompleteItemsLoaded = [];   

function prepareAutocomplete(path, idArray){
    // first checking if data has been fetched from database before
    if(!(path in autoCompleteItemsLoaded)){ 
        // if not, get the data from the database
        $.ajax({
          url: path,
          dataType: 'json',
          async: false,
          success: function(data) {
           var items = [];

            data.forEach(function(item){
                items.push({label: item["name"], value: item["id"]}); // store data in items-array
            });

            autoCompleteItemsLoaded[path] = items; // store items-array in array that has all loaded items
          }
        });
    }

    var items = autoCompleteItemsLoaded[path];

    for(var key in idArray){
        $('#'+idArray[key].listID).autocomplete({
          source: items,
          messages: {
            noResults : '',
            results: function(){}
          },
          select: function(event, ui){
            this.value = ui.item.label;
            return false;
          },
          change: function(event, ui){
            if(this.value == '' || this.value == null){
                $("#"+idArray[key].hiddenID).val('');
            }else if(ui.item != null){
                $("#"+idArray[key].hiddenID).val(ui.item.value);
            }
          }
        });
    }
}

现在，如果我在idArray中只有一个字段，那么这段代码就可以工作了。但是，一旦我在idArray中处理多个字段，例如，如果我在同一页面上有多个雇员字段，当然是不同ID的！，它没有发挥应有的作用。它在每个字段中显示自动完成的内容，这是正确的，但是如果您选择了一个结果，idArray中最后一个字段的值将发生更改

我不明白为什么。有人能帮我吗？

在prepareAutocompletepath/to/script/that/returns/results中， ['listID'=>'员工列表'，'hiddenID'=>'员工']；我不确定我是否理解你所说的['listID'=>'employee_list'，'hiddenID'=>'employee']是什么意思。我想你是想写[{'listID'：'employee_list'，'hiddenID'：'employee'}]，这意味着根据你的设计，如果你想使用多个自动完成绑定，你必须按如下方式调用函数：

prepareAutocomplete("path/to/script/that/returns/results",
[{'listID': 'employee_list1', 'hiddenID': 'employee1'},
{'listID': 'employee_list2', 'hiddenID': 'employee2'},
{'listID': 'employee_list3', 'hiddenID': 'employee3'}]);

for(var key in idArray){
    (function( arr ) {
        $('#' + arr.listID).autocomplete({
          source: items,
          messages: {
            noResults : '',
            results: function(){}
          },
          select: function(event, ui){
            this.value = ui.item.label;
            return false;
          },
          change: function(event, ui){
            if(this.value == '' || this.value == null){
                $("#" + arr.hiddenID).val('');
            }else if(ui.item != null){
                $("#" + arr.hiddenID).val(ui.item.value);
            }
          }
        });
    })( idArray[key] );
}

然后，for循环需要一个闭包，如下所示：

prepareAutocomplete("path/to/script/that/returns/results",
[{'listID': 'employee_list1', 'hiddenID': 'employee1'},
{'listID': 'employee_list2', 'hiddenID': 'employee2'},
{'listID': 'employee_list3', 'hiddenID': 'employee3'}]);

for(var key in idArray){
    (function( arr ) {
        $('#' + arr.listID).autocomplete({
          source: items,
          messages: {
            noResults : '',
            results: function(){}
          },
          select: function(event, ui){
            this.value = ui.item.label;
            return false;
          },
          change: function(event, ui){
            if(this.value == '' || this.value == null){
                $("#" + arr.hiddenID).val('');
            }else if(ui.item != null){
                $("#" + arr.hiddenID).val(ui.item.value);
            }
          }
        });
    })( idArray[key] );
}

---

谢谢你的帮助！函数调用是正确的，它必须是prepareAutocompletepath/to/script/that/returns/results，[{'listID'：'employee_list1'，'hiddenID'：'employee1'}，{'listID'：'employee_list2'，'hiddenID'：'employee2'}，{'listID'：'employee_list3'，'hiddenID'：'employee3'}；。我已经对for循环进行了更改，现在它可以工作了！剩下的唯一问题是重新设置了预填充的员工字段。你有解决办法吗？很高兴听到它起作用了！是否重置员工字段？你能解释一下你的意思吗？我的意思是，在页面加载上，文本字段（例如员工的文本字段）充满了先前保存在那里的数据。所以你想基本上更新这些字段。但是，在字段被保存的数据填充后不久，它们和隐藏字段的值就被清空了。请记住，我找到了解决方案，它与这个问题无关：非常感谢！好的，我现在明白了。在页面加载时，您可以检查employee字段是否有值，如果有，则触发autocomplete的select方法，以便填充隐藏字段。