实现多个自动完成

时间:2018-08-19 09:33:31

标签: ajax autocomplete materialize

我想在表单中使用多个实现的自动完成输入。 我想用instance.updateData(data)填充从nodejs webservice接收数据的项目。 我的问题是两个输入都将获得不同的数据列表。

HTML:

<div class="input-field col s12">
    <input type="text" id="input1" class="autocomplete">
    <label for="input1">input1</label>
</div>
<div class="input-field col s12">
    <input type="text" id="input2" class="autocomplete">
    <label for="input2">input2</label>
</div>


// Initialization
$(document).ready(function(){
    $('#input1').autocomplete({
        data: {
            "input1": null  // just first initial value. Further got by AJAX
        }
    });
    $('#input2').autocomplete({
        data: {
            "input2": null
        }
    });

    // call methods for filling the autocomplete:
    getAJAXInput1();
    getAJAXInput2();
});




// this is the part where the data1 and data2 which are got by the AJAX call
// have to be given to the input-elements:
   var elem1 = document.querySelector('#input1');
   var instance1 = M.Autocomplete.getInstance(elem1);

   instance1.updateData(data1);

   var elem2 = document.querySelector('#input2');
   var instance2 = M.Autocomplete.getInstance(elem2);

   instance2.updateData(data2);

我的问题是,我只有一个输入正在运行自动完成列表。 怎么了?谢谢你的帮助。 问候 马库斯

0 个答案:

没有答案