<label><?php echo __('Note'); ?></label>
<div class="input-group input-group-sm pblookup">
    <?php
    echo $this->Form->input('note_id', array(
        'id' => 'note_id_lookup',
        'label' => false
    ));
    ?>
    <div class="input-group-btn">
        <button class="btn btn-default" type="button" data-toggle="modal" data-target="#note_dt"><i class="ion ion-plus-round"></i></button>
    </div>
</div>
<div id="note_dt" class="modal fade" role="dialog" style="z-index: 1500;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title"><i class="ion ion-ios-plus-empty"></i> <?php echo __('Add') .' '.__('Note') ?></h4>
            </div>
            <div class="modal-body h100">
                <?php
                echo $this->Form->input('i_note_name', array('id' => 'f_note_name', 'label' => __('Note')));
                ?>
            </div>
            <div class="modal-footer">
                <button class="btn btn-sm btn-primary" type="button" onclick="lkp_note_save()"><i class="fa fa-save"></i> <?php echo __('Submit') ?></button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
      $(document).ready(function () {
          $('#note_id_lookup').select2({
              allowClear: true,
              language: {
                  errorLoading: function () {
                      var newOption = new Option('', '', false, false);
                      $('#note_id_lookup').append(newOption).trigger('change');
                  },
                  noResults: function () {
                      var newOption = new Option('', '', false, false);
                      $('#note_id_lookup').append(newOption).trigger('change');
                  }
              },
              escapeMarkup: function (markup) {
                  return markup;
              },
              placeholder: "<?php echo __('Find') .' '. __('Note')?>",
              ajax: {
                  url: "<?php echo Router::url(array('plugin' => false, 'controller' => 'notes', 'action' => 'lookup'), true) ?>/",
                  dataType: 'json',
                  delay: 5,
                  data: function (params) {
                      var query = {
                          filter: params.term
                      }
                      return query;
                  },
                  processResults: function (data) {
                      return {
                          results: data
                      };
                  }
              }
          });
          <?php if (isset($this->request->data['User'])) : ?>
            var newOption = new Option('<?php echo $this->request->data['Note']['name'] ?>', '<?php echo $this->request->data['Note']['id'] ?>', false, false);
            $('#note_id_lookup').append(newOption).trigger('change');
          <?php endif; ?>
      });

      function lkp_note_save() {
          $('#note_dt').modal('hide');
          $.ajax({
              url: `<?php echo Router::url(array('controller' => 'notes', 'action' => 'jquery_add'), true) ?>`,
              data: {
                  p_name: $("#f_note_name").val(),
              },
              success: function (data) {
                  var opt = $.parseJSON(data);
                  var newOption = new Option(opt.desc, opt.id, true, true);
                  $('#note_id_lookup').append(newOption).trigger('change');
              }
          });
      }
</script>