动态使用 dxautocomplete

Question

好友

我在 devextreme 移动 dxlist 中创建了 dxautocomplete。但只形成了第一条线。我想要每一行，我想在每一行上获取不同的数据。要动态。我知道下面的代码总是出现相同的代码，但是如何更改它以及如何在每一行显示它？

Html代码

   <div data-bind="dxList:{dataSource: [{ key: 1, title: 'Number' },
   { key:2,title: 'Item2' }]}">
   <div data-options="dxTemplate : { name: 'item' } ">
   <div data-bind="text: title"></div>
   <div id="a"></div>                    
   </div>
   </div>

js代码

   $.ajax({
    type: "GET",
    url:MYURL,
    success: function (msg, result, status, xhr) {
    var obj = jQuery.parseJSON(msg);
    $("#a").dxAutocomplete({
    dataSource: obj,
    displayExpr: 'Name'// ı want to  this dynamic 
    });} });

Answer 1

在您的示例中，您混淆了 KnockoutJS 和 jQuery 两种方法。此外，您正在为每个列表项使用 id="a"。但是 id 应该是唯一的。

因此，对于您的情况，我建议您将自动完成初始化移至项目模板：

<div data-bind="dxList:{dataSource: [/*...*/]}">
<div data-options="dxTemplate : { name: 'item' } ">
    <div data-bind="text: title"></div>
    <div data-bind="dxAutocomplete: $root.getAutocompleteOptions.call($data)"></div>
</div>

$root.getAutocompleteOptions 函数可以为每个自动完成计算选项。注意，您应该更改此函数的上下文：

$root.getAutocompleteOptions.call($data)

它允许您定义当前呈现的列表项：

getAutocompleteOptions: function() {
    var currentListItem = this;
    if(currentListItem.key === 1) { /*...*/ }
}

我在这里创建了一个演示 - https://jsfiddle.net/aj6rrjza/

动态使用 dxautocomplete

Using dxautocomplete dynamically

ajax

jquery

devextreme