Question

我想问一下如何在多个动态元素上附加magicsuggest？有没有人以前做过？

继续这种情况，每次我输入＆＃34;逗号＆＃34;或点击＆＃34;输入＆＃34;它应该创建一个带有2个输入的面板，每个输入带有magicsuggest。所以，如果我输入：

 1 towel, 2 plates

它应该创建2个面板，每个面板有2个输入，每个面板都带有magicsuggest。

上述情况已经完成，但现在的问题是，当它使用magicsuggest加载所有输入时，它总是关注第一个输入。我可以选择其他人，但总是专注于第一个。

我尝试过这段代码，但无济于事。

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

首先，您忘记了数据键末尾的逗号（＆＃34; Water＆＃34;] ,.）

如果你删除它仍然无效..你可以尝试以下..

创建一个函数attachMagicSuggest（＆＃39; text_area_request_0＆＃39;），它将把您想要填充数据的输入的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对象的正确属性。

将magicsuggest附加到动态元素上

2 个答案: