Move and Change order from multiselect to single select with search

Move and Change order from multiselect to single select with search and json list options

by mhctoledo

HTML

<select id='custom-headers' multiple='multiple'>
  <option value='elem_1' selected>elem 1</option>
  <option value='elem_2'>elem 2</option>
  <option value='elem_3'>elem 3</option>
  <option value='elem_4' selected>elem 4</option>
  
  <option value='elem_100'>elem 100</option>
</select>

JavaScript

var jsonObj_OptionsList = {
                            "group3": [
                              {"group3_value3": "name3"},
                              {"group3_value1": "name1"},
                              {"group3_value2": "name2"}
                            ],
                            "group1": [
                              {"group1_value2": "name2"},
                              {"group1_value3": "name3"},
                              {"group1_value1": "name1"}
                            ],
                            "group2": [
                              {"group2_value2": "name2"},
                              {"group2_value1": "name1"},
                              {"group2_value3": "name3"}
                            ]
                          };


// jsonObj_ListFrom = values and labels from jsonObj_OptionsList - values with their labels from jsonObj_ListTo                          
var jsonObj_ListFrom = "";
                      

// Selected = values from jsonObj_ListTo and Labels from jsonObj_OptionsList                      
var jsonObj_ListTo = [
                        "group3_value3",
                        "group2_value1",
                        "group1_value2",
                        "group3_value2",
                        "group1_value3"
                      ];