Необходимо создать автозаполнение с мастером и множественный выбор флажок

Question

Проблема 1-Я создал автозаполнение с флажком множественного выбора, но не смог установить все флажки при нажатии какого-либо другого флажка, который не является частью этого флажка autocomplete-multiselect.

Проблема 2: - всякий раз, когда выбор флажка autocomplete-multiselect-checkbox необходимо динамически заполнить некоторые другие autocomplete-multiselect-checkbox.

Пример: Регион и Страна оба являются флажком autocomplete-multiselect-Region Область A имеет - (Страна) 1,2 , 3 Область B имеет - (Страна) 4,5,6

Если флажок «Регион B» установлен, то в поле «Автозаполнение страны» должно отображаться значение 4,5,6 с флажком.

Для проблемы 1: ниже HTML:

<input id="multiUsers" class="col-lg-8 multiselect-element w3-input inline" type="text" placeholder="search"></input>

ниже JS:

 var userData = [
     "ActionScript",
     "AppleScript",
     "Asp",
     "BASIC",
     "C++",
     "Clojure",
     "COBOL",
     "ColdFusion"
];
function split(val) {
    return val.split(/,\s*/);
}
function bindUsersAutoComplete(ele, options) {
    var text = ele.val();
    text = text == null || text == undefined ? "" : text;
    $(ele).autocomplete(options).data("ui-autocomplete")._renderItem = function (ul, item) {
    var checked = (text.indexOf(item.label + ', ') > -1 ? 'checked' : '');
    return $("<li></li>")
      .data("ui-autocomplete-item", item)
      .append('<a href="javascript:;"><input type="checkbox" class="checkBoxClass"' + checked + '/>' + item.label + '</a>')
      .appendTo(ul);
    };
}

$(function () {
  var $this;
  var multiSelectOptions = {
      minLength: 0,
      source: function (request, response) {
            response($.map(userData, function (item) {
            return {
                label: item
            }
        }));
      },
    select: function (event, ui) {
        var text = $this.val();
        text = text == null || text == undefined ? "" : text;
        var checked = (text.indexOf(ui.item.value + ', ') > -1 ? 'checked' : '');
        if (checked == 'checked') {
          this.value = this.value.replace(ui.item.value + ', ', '')
        }
         else {
          var terms = split(this.value);
          // remove the current input
          terms.pop();
          // add the selected item
          terms.push(ui.item.value);
          // add placeholder to get the comma-and-space at the end
          terms.push("");
          this.value = terms.join(", ");
        }           
        return false; 
    }
}

  $(document).find('#multiUsers').on('keydown', function () {
      bindUsersAutoComplete($this, multiSelectOptions);
    $($this).autocomplete("search");
    }).on('focus', function () {
        $this = $(this);
        bindUsersAutoComplete($this, multiSelectOptions);
        $($this).autocomplete("search");
    }) 
  })