在动态元素上附加magicsuggest

Question

我想问一下如何将magicsuggest附加到多个动态元素上？以前有人这么做过吗？

情况是这样的，每次我输入“逗号”或“回车”时，它都会创建一个带有两个输入的面板，每个面板都有魔术提示。所以如果我输入：

 1 towel, 2 plates

它应该创建2个面板与2个输入，每个与魔术建议。

上面的情况已经发生了，但现在的问题是，当它加载所有的输入时，它总是专注于第一个输入。我可以选择其他的，但总是专注于第一个。

我已经试过这段代码了，但是没有用。

var ms = {};
for(var i = 1; i <= 2; i++){        

    ms[i] = $('#text_area_request_'+i).magicSuggest({
        id: "request_id_" + i,
        name: "request_id[" + i + "]",
        allowFreeEntries: false,            
        width: 350,
        maxSelection: 1,    
        data: ["Wifi", "Steak", "Food", "Water"],           
    });

}   

谢谢

Answer 1

首先，您忘记了数据键末尾的逗号("Water"]，)。

如果您将其删除，但仍然不起作用..您可以尝试执行以下操作。

创建一个函数attachMagicSuggest('text_area_request_0')，该函数将您想要填充数据的输入的ID作为参数。

每次你创建一个新的面板(或者你管它叫什么)，也运行这个函数。

function attachMagicSuggest(inputId){

    var ms1 = $('#'+inputId).magicSuggest({
     placeholder: 'Select a cuisine',
     allowFreeEntries: false,            
     width: 350,
     maxSelection: 1,    
     data: ["Wifi", "Steak", "Food", "Water"]
    });

}

Answer 2

我不完全确定你所说的焦点是什么意思，但也许问题是你每次都引用相同的对象。确保每次在循环中使用不同的对象。magicSuggest的返回值不能直接附加到另一个jquery对象，所以我必须使用一个类似如下的函数：

function buildMagicSuggest(id, options, setValue) {
    var $input = $('<input>', {id: id, class: 'form-control'});
    var data = [];
    for (var i = 0; i < options.length; i++) {
        if (options[i] === null) {
            continue;
        }
        var name = options[i] === '' ? '&nbsp;' : options[i];
        data.push({id: options[i], name: name});
    }
    var magic = $input.magicSuggest({
        placeholder: '',
        allowFreeEntries: true,
        selectPositions: 'bottom',
        selectionStacked: false,
        maxDropHeight: 145,
        maxSelection: 1
    });
    magic.setData(data);
    setValue && magic.setValue([setValue]);
    return magic.container;
}

然后，您可以像这样使用此函数：

$('#the-form').append(buildMagicSuggest(
    inputId,
    ["Wifi", "Steak", "Food", "Water"],
    "Wifi"
));

关键是找到包含整个控件(容器)的magicSuggest对象的正确属性。