Siguiendo [la documentación][1] intento lo siguiente:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    var data = {
      "results": [
        {
          "text": "Life Good",
          "children": "[{\"id\" : 1, \"text\" : \"Lg Prueba 1\", \"element\" : \"HTMLOptionElement\"}, {\"id\" : 2, \"text\" : \"Lg Prueba 2\", \"element\" : \"HTMLOptionElement\"}]",
          "elment": HTMLOptGroupElement
        },
        {
          "text": "Samsung",
          "children": "[{\"id\" : 3, \"text\" : \"Samsung Prueba 1\", \"element\" : \"HTMLOptionElement\"}, {\"id\" : 4, \"text\" : \"Samsung Prueba 2\", \"element\" : \"HTMLOptionElement\"}]",
          "elment": HTMLOptGroupElement
        }
      ],
      "pagination": {
        "more": false
      }
    };


    $("select").select2({
      placeholder: "Elija...",
      allowClear: true,
      data: data.results,
      templateResult: function (data) {    
        // We only really care if there is an element to pull classes from
        if (!data.element) {
          return data.text;
        }

        var $element = $(data.element);

        var $wrapper = $('<span></span>');
        $wrapper.addClass($element[0].className);

        $wrapper.text(data.text);

        return $wrapper;
      }
    });

<!-- language: lang-html -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>

    <select style="width: 100%"></select>

<!-- end snippet -->

Pero no me muestra los hijos, los cuales son reflejados en el `json` como `children`.

[Acá un ejemplo][2] de lo que quiero pero no es con ajax.


  [1]: https://select2.github.io/options.html#can-optgroup-tags-be-made-selectable
  [2]: https://stackoverflow.com/questions/30820215/selectable-optgroups-in-select2#30948247