Связанные/прикованные свитки MagicSuggest?

Question

Я пытаюсь создать набор взаимосвязанных/цепочных мультиселектов, используя MagicSuggest и php-запрос. Итак, сначала я построить коробку MagicSuggest с функцией, когда ms1 изменяется:

$(document).ready(function() { 
var ms1 = $('#ms1').magicSuggest({ 
    data: 'datams1.php', 
    displayField: 'name' }); 

$(ms1).on('selectionchange', function(event, combo, selection){ 
    run(selection);}); 
}); 

Тогда я построить новый MagicSuggest окно, выполнив запрос PHP, который возвращает JSON объект:

function run(country) { 
$.getJSON("query.php", { id: country[0].id}, callbackFuncWithData); 
} 

function callbackFuncWithData(region) { 
var ms2 = $('#ms2').magicSuggest({ 
    data: region, 
    displayField: 'name' 
    }); 
} 

Этот работает, как только я делаю начальный отбор, но не обновляюсь, если меняю выбор. Я проверил, и внутри моей «callbackFuncWithData» я создаю обновленный «облачный» json-объект. Таким образом, возможно, мне нужно обновить/перезагрузить мой объект # ms2.

Мои вопросы:

1. Есть ли способ, чтобы заставить обновления из MagicSuggest данных?
2. Есть ли лучший/более чистый/более эффективный способ использования результатов одного окна MagicSuggest для запроса и возврата данных для второго связанного блока MagicSuggest?

Спасибо!

Answer 1

1. использовать метод setData() для динамического задания данных при необходимости.
2. Вы всегда можете использовать библиотеку, подобную угловой, чтобы связывать свойства компонента вместе.

Answer 2

Этот код делает 2 связанных комбо с теми же данными, но один из них показывает поле «имя», а другой показывает «имя1».

function reflectSelection(ms1, ms2){ 
var val = parseInt(ms1.getValue()); 
var val1 = parseInt(ms2.getValue()); 
if(!isNaN(val)){ 
    if(val != val1){ 
    ms2.clear(true); 
    ms2.setSelection(ms1.getSelection()); 
    } 
} 
else 
{ 
    ms2.clear(true); 
    } 

} 

var msName = $('#ms-onselectionchange').magicSuggest({ 
    maxSelectionRenderer: function(){ return ''; }, 
    useTabKey: true, 
    noSuggestionText: '', 
    strictSuggest: true, 
    maxSelection: 1, 
    allowFreeEntries: false, 
    placeholder : '', 
    data: [{'id':0, 'name':'Paris', 'name1':'Paris5'}, {'id':1, 'name':'New York', 'name1':'New York5'}], 
    }); 

var msName1 = $('#ms-onselectionchange1').magicSuggest({ 
    maxSelectionRenderer: function(){ return ''; }, 
    useTabKey: true, 
    noSuggestionText: '', 
    displayField: 'name1', 
    strictSuggest: true, 
    maxSelection: 1, 
    allowFreeEntries: false, 
    placeholder : '', 
    data: [{'id':0, 'name':'Paris', 'name1':'Paris5'}, {'id':1, 'name':'New York', 'name1':'New York5'}], 
    }); 
    $(msName).on('selectionchange', function(e,m){ 
    reflectSelection(msName, msName1); 

    }); 

    $(msName1).on('selectionchange', function(e,m){ 
    reflectSelection(msName1, msName); 
    });