Joomla 3.4x select2 example with ajax

<?php
// See: http://pastebin.com/fbqLXDPZ for formbehaviourselect2
/**
 * @version     $Id$
 * @package     com_cn_reports
 * @copyright   Copyright (C) 2015. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 * @author
 */
// no direct access
defined('_JEXEC') or die;

JHtml::_('behavior.keepalive');
JHtml::_('behavior.tooltip');
//JHtml::_('behavior.formvalidation'); pre joomla 3.4
JHTML::_('behavior.formvalidator'); // jooomla 3.4
//JHtml::_('formbehavior.chosen', 'select'); // defaault joomla form behaviour for select

// form behaviour select2 is a custom behaviour class that implements
// select2 version 4. All necessary scripts are loaded from there.
JHtml::_('formbehaviourselect2.select2', 'select'); // /libraries/cms/html/formbehaviorselect2.php
JHtml::addIncludePath(JPATH_COMPONENT . '/helpers/html');
//Load admin language file
$lang = JFactory::getLanguage();
$lang->load('com_cn_reports', JPATH_ADMINISTRATOR);
$doc = JFactory::getDocument();

$doc->addScript(JUri::base() . '/components/com_cn_reports/assets/js/form.js');

$js_example_basic_single = 'jQuery(document).ready(function() {' . PHP_EOL;
$js_example_basic_single .= 'jQuery(".js-example-basic-single").select2();' . PHP_EOL;
$js_example_basic_single .= '});' . PHP_EOL;

// getFormatToken is needed as the server will use this as a security check to make sure data is being asked for
// from a valid form call.
$ajaxUrlUser = 'index.php?option=com_cn_reports&task=ajax.usersjson&format=json&tmpl=component&' . JSession::getFormToken() . '=1';
$placeholder = JText::_('COM_CN_REPORTS_LBL_SELECT_OPTON');

// the style below is to format the dropdown of the customer after the ajax call picks up data.
?>
<style>
.boxer
{
   display: table;
   border-collapse: collapse;
   border-spacing: 0;
   table-layout: fixed;
}

.boxer .box-row {
   display: table-row;
}

.boxer .box {
   display: table-cell;
   text-align: left;
   vertical-align: top;
/*    border: 1px solid black; */
   white-space: nowrap;
   background: transparent;
}
<?php
// set the background color to blue for rows currently being
/// hovered over by the mouse in the dropdown list of ajax data.
?>
.select2-results__option--highlighted > .boxer,
.select2-results__option--highlighted > .box
{
    background: #5897fb;
}
.box1 {
  width:25%;
}
.box2 {
  width:25%;
}
.box3 {
  width:50%
}
<?php
// the following css is specific to customer drop down list.
// it sets the padding to 0 giving a much nicer display in the ajax return data.
?>
#select2-jform_customer_id-results > li,
{
    padding:0px;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery("#jform_customer_id").select2({
        ajax: {
            url: "<?php echo $ajaxUrlUser; ?>",
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                q: params.term, // search term
                page: params.page
            };
        },
        processResults: function (data, page) {
<?php
        // parse the results into the format expected by Select2.
        // since we are using custom formatting functions we do not need to
        // alter the remote JSON data
?>
            return {
            results: data
            };
        },
        cache: true
        },
        placeholder: "<?php echo $placeholder; ?>",
        escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
        minimumInputLength: 1,
        templateResult: formatUser,
        templateSelection: formatUserSelection,
        allowClear: true
    });

<?php
    // sets up the clear method when the select2 is cleared.
    // The reason for this is that the default select2 will not empty the selects
    // for the ajax call when clear is called. This resulted in the select to remain
    // when existing record was being summited back to the server.
    // For instance if the customer field had a value before the form was loaded and
    // then you loaded the form, cleard the customer and then submitted the form then
    // the result was joomla did not pick up any changes and even though you cleared
    // the customer it still got submitted and pickup on the serer side.
?>
    jQuery("#jform_customer_id").on("select2:unselect", function (e) {
        var $select = jQuery('#jform_customer_id');
        $select.empty();
    });
});

jQuery(document).ready(function(){
    <?php
    // add required to fields and dropdowns that are required
    // these are dynamicly genereated and therefore we will add the class the them
    // client side.
    ?>
    if (!jQuery( "#jform_override_type_id" ).is( ".required" )) {
        jQuery('#jform_override_type_id').addClass('required');
    }

    if (!jQuery( "#jform_retail_partner_id" ).is( ".required" )) {
        jQuery('#jform_retail_partner_id').addClass('required');
    }
    <?php
    // set the placeholder text for the exsiting drop downs
    // Joomla does generate an empty option as the first element
    // for new records. Select2 will use these to display select an option.
    ?>
    jQuery("#jform_override_type_id").select2({
        placeholder: "<?php echo $placeholder; ?>",
        allowClear: false
    });
    jQuery("#jform_retail_partner_id").select2({
        placeholder: "<?php echo $placeholder; ?>",
        allowClear: false
    });
});
<?php
    // the format user is used by the ajax call for the customer
    // it uses css to format the display. Each found entry in the ajax call will
    // call the formatUer function.
    //
    // The formatUserSelections function simply converts the user name field into user.text field
    // this is because select2 4.0 is strict about having the format as id and name for the select element
?>
    function formatUser (user) {
        //console.log(user);
        if (user.loading) return user.text;
        var markup = '' +
        '<div class="boxer">'                                       +
            '<div class="box-row">'                                 +
                '<div class="box box1">' + user.name + '</div>'     +
                '<div class="box box2">' + user.username + '</div>' +
                '<div class="box box3">' + user.email + '</div>'    +
            '</div>'                                                +
        '</div>';

        return markup;
    }

    function formatUserSelection (user) {
        return user.name || user.text;
    }


 </script>


<script type="text/javascript">
    if (jQuery === 'undefined') {
        document.addEventListener("DOMContentLoaded", function(event) {
            jQuery('#form-rtreport').submit(function(event) {

            });


            jQuery('input:hidden.user_id').each(function(){
                var name = jQuery(this).attr('name');
                if(name.indexOf('user_idhidden')){
                    jQuery('#jform_user_id option[value="' + jQuery(this).val() + '"]').attr('selected',true);
                }
            });
                    jQuery("#jform_user_id").trigger("liszt:updated");
            jQuery('input:hidden.override_type_id').each(function(){
                var name = jQuery(this).attr('name');
                if(name.indexOf('override_type_idhidden')){
                    jQuery('#jform_override_type_id option[value="' + jQuery(this).val() + '"]').attr('selected',true);
                }
            });
                    jQuery("#jform_override_type_id").trigger("liszt:updated");
        });
    } else {
        jQuery(document).ready(function() {
            jQuery('#form-rtreport').submit(function(event) {

            });


            jQuery('input:hidden.user_id').each(function(){
                var name = jQuery(this).attr('name');
                if(name.indexOf('user_idhidden')){
                    jQuery('#jform_user_id option[value="' + jQuery(this).val() + '"]').attr('selected',true);
                }
            });
                    jQuery("#jform_user_id").trigger("liszt:updated");
            jQuery('input:hidden.override_type_id').each(function(){
                var name = jQuery(this).attr('name');
                if(name.indexOf('override_type_idhidden')){
                    jQuery('#jform_override_type_id option[value="' + jQuery(this).val() + '"]').attr('selected',true);
                }
            });
                    jQuery("#jform_override_type_id").trigger("liszt:updated");
        });
    }
</script>

<div class="rtreport-edit front-end-edit">
    <?php if (!empty($this->item->id)): ?>
        <h1><?php echo JText::_('COM_CN_REPORTS_EDIT_ITEM') . '&nbsp;' . $this->item->override_short_desc; ?></h1>
    <?php else: ?>
        <h1><?php JText::_('COM_CN_REPORTS_ADD_ITEM'); ?></h1>
    <?php endif; ?>

    <form id="form-rtreport" action="<?php echo JRoute::_('index.php?option=com_cn_reports&task=rtreport.save'); ?>" method="post" class="form-validate form-horizontal" enctype="multipart/form-data">

    <input type="hidden" name="jform[id]" value="<?php echo $this->item->id; ?>" />
    <input type="hidden" name="jform[ordering]" value="<?php echo $this->item->ordering; ?>" />
    <input type="hidden" name="jform[checked_out]" value="<?php echo $this->item->checked_out; ?>" />
    <input type="hidden" name="jform[state]" value="<?php echo $this->item->state; ?>" />
    <input type="hidden" name="jform[order_id]" value="<?php echo $this->item->order_id; ?>" />

    <div class="control-group">
        <div class="control-label"><?php echo $this->form->getLabel('override_short_desc'); ?></div>
        <div class="controls"><?php echo $this->form->getInput('override_short_desc'); ?></div>
    </div>

    <div class="control-group">
        <div class="control-label"><?php echo $this->form->getLabel('override_type_id'); ?></div>
        <div class="controls"><?php echo $this->form->getInput('override_type_id'); ?></div>
    </div>
    <?php foreach((array)$this->item->override_type_id as $value): ?>
        <?php if(!is_array($value)): ?>
            <input type="hidden" class="override_type_id" name="jform[override_type_idhidden][<?php echo $value; ?>]" value="<?php echo $value; ?>" />
        <?php endif; ?>
    <?php endforeach; ?>

    <div class="control-group">
        <div class="control-label"><?php echo $this->form->getLabel('retail_partner_id'); ?></div>
        <div class="controls"><?php echo $this->form->getInput('retail_partner_id'); ?></div>
    </div>
    <?php foreach((array)$this->item->retail_partner_id as $value): ?>
        <?php if(!is_array($value)): ?>
            <input type="hidden" class="retail_partner_id" name="jform[user_idhidden][<?php echo $value; ?>]" value="<?php echo $value; ?>" />
        <?php endif; ?>
    <?php endforeach; ?>

    <div class="control-group">
        <div class="control-label"><?php echo $this->form->getLabel('customer_id'); ?></div>
            <div class="controls">
                <select id="jform_customer_id" name="jform[customer_id]" class="customer_id">
                <?php if ((!empty($this->item->id) && (!empty($this->item->customer_id) ))) {
                    // call html helper method to generate the current selected option
                    // example <option value="1223" selected="selected">John D</option>
                    echo JHtml::_('contentuser.userOption', (int)$this->item->customer_id);
                } ?>
                </select>
            </div>
        </div>
        <div class="control-group">
            <div class="control-label"><?php echo $this->form->getLabel('order_id'); ?></div>
            <div class="controls"><?php echo $this->form->getInput('order_id'); ?></div>
        </div>
    <div class="control-group">
        <div class="control-label"><?php echo $this->form->getLabel('amount'); ?></div>
        <div class="controls"><?php echo $this->form->getInput('amount'); ?></div>
    </div>
    <div class="control-group">
        <div class="control-label"><?php echo $this->form->getLabel('override_desc'); ?></div>
        <div class="controls"><?php echo $this->form->getInput('override_desc'); ?></div>
    </div>
    <div class="control-group">
        <div class="control-label"><?php echo $this->form->getLabel('admin_notes'); ?></div>
        <div class="controls"><?php echo $this->form->getInput('admin_notes'); ?></div>
    </div>
    <?php if(empty($this->item->created_by)): ?>
        <input type="hidden" name="jform[created_by]" value="<?php echo JFactory::getUser()->id; ?>" />
    <?php else: ?>
        <input type="hidden" name="jform[created_by]" value="<?php echo $this->item->created_by; ?>" />
    <?php endif; ?>
    <input type="hidden" name="jform[checked_out_time]" value="<?php echo $this->item->checked_out_time; ?>" />

    <input type="hidden" name="jform[modified_time]" value="<?php echo $this->item->modified_time; ?>" />

    <input type="hidden" name="jform[created_time]" value="<?php echo $this->item->created_time; ?>" />

        <div class="control-group">
            <div class="controls">
                <button type="submit" class="validate btn btn-primary"><?php echo JText::_('JSUBMIT'); ?></button>
                <a class="btn" href="<?php echo JRoute::_('index.php?option=com_cn_reports&task=rtreportform.cancel'); ?>" title="<?php echo JText::_('JCANCEL'); ?>"><?php echo JText::_('JCANCEL'); ?></a>
            </div>
        </div>

        <input type="hidden" name="option" value="com_cn_reports" />
        <input type="hidden" name="task" value="rtreportform.save" />
        <?php echo JHtml::_('form.token'); ?>
    </form>
</div>