[FUEL CMS - Use Select2 with Ajax Options] #php #fuelcms

custom_fields.php

<?php
// fuel/application/config/custom_fields.php 
/*
|--------------------------------------------------------------------------
| Form builder
|--------------------------------------------------------------------------
|
| Specify field types and other Form_builder configuration properties
| This file is included by the fuel/modules/fuel/config/form_builder.php file
*/
$fields['my_custom_field'] = [];


// Select2 Ajax field
$fields['select2_ajax'] = [
	'class'		=> [FUEL_FOLDER => 'Form_builder'],
	// create a hidden field instead of a <select>, because the docs say so:
	// @see https://select2.github.io/select2/#data
	// this is only true for select2 v3.x
	// @see https://stackoverflow.com/a/16345339/814031
	'function'	=> 'create_hidden',
	'js' => [
		FUEL_FOLDER => [
			'jquery/plugins/select2.min',
			// custom field init code!
			'fuel/my_custom_fields.js'
		],
	],
	'js_exec_order' => 1,
	'js_function' => 'fuel.fields.select2_ajax',
	'js_params' => [
		'foo' => 'bar',
		'width' => '80%',
		'ajax' => [
          	// Needs the following method: Datastore_model::ajax_get_datastore()
          	// See https://docs.getfuelcms.com/general/javascript#ajax
			'url' => fuel_url('datastore/ajax/get_datastore'),
			'dataType' => 'json',
		],

	],
	'css' => [
		FUEL_FOLDER => [
			'select2',
		],
	],
];


$fields['select2_ajax']['class'] = [FUEL_FOLDER => 'Fuel_custom_fields'];
$fields['select2_ajax']['function'] = 'select2';
$fields['select2_ajax']['js_function'] = 'fuel.fields.select2v4_ajax';
$fields['select2_ajax']['js'] = [
	'https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js',
	FUEL_FOLDER => [
		'fuel/my_custom_fields.js'
	],
];
$fields['select2_ajax']['css'] = 'https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css';



include(FUEL_PATH . 'config/custom_fields.php');

// Overwrite Select2 field to use v4 from a cdn
$fields['select2'] = [
	'class'		=> [FUEL_FOLDER => 'Fuel_custom_fields'],
	'function'	=> 'select2',
	// 'js' => [
	// FUEL_FOLDER => [
	// 'jquery/plugins/select2.min',
	// ],
	// ],
	'js' => 'https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js',
	'js_exec_order' => 1,
	'js_function' => 'fuel.fields.select2',
	// 'css' => [
	// FUEL_FOLDER => [
	// 'select2',
	// ],
	// ],
	'css' => 'https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css'
];


/* End of file form_builder.php */
/* Location: ./application/config/form_builder.php */

Custom_model.php

<?php
  
class Custom_model extends Base_module_model
{
  function form_fields($values = [], $related = [])
  {
      $fields = parent::form_fields($values, $related);

      $fields['key'] = [
          'type' => 'select2_ajax',
          'class' => 'select2_ajax', // the selector in fuel.fields.select2_ajax
          'style' => 'width: 300px', // set an initial width
          'first_option' => '',
          'module' => 'datastore',
          'model' => 'datastore',
          'model_params' => ['key', 'key_name_de'],
      ];

    // etc
  }
}

Datastore_model.php

<?php
class Datastore_model extends Base_module_model
{
  public function ajax_get_datastore($params)
  {
    
    // create select2 data structure right here.
    $this->db->select('`key` AS id, key_name_de AS text', false);
    $this->db->like('key_name_de', $this->input->get('q'));
    $results['results'] = (array) $this->find_all_array();
    return json_encode($results);
  }
}

my_custom_fields.js

// /fuel/modules/fuel/assets/js/fuel/my_custom_fields.js

fuel.fields.select2_ajax = function(context, options){


	var init = {
		placeholder: "Search for a repository",
		minimumInputLength: 1,
		dataType: 'json',
		ajax: {
			url: '',
			dataType: 'json',
			quietMillis: 250,
			data: function (term, page) {
				return {
					q: term, // search term
				};
			},
			results: function (data, page) {
				// parse the results into the format expected by Select2.
				// data.results = [
				// 	{id: 2, text: 'Option 1'},
				// 	{id: 3, text: 'Option 12'},
				// ]
				// since we are using custom formatting functions we do not need to alter the remote JSON data
				return data;
			},
			cache: true
		},
		// write entry if not exist
		createSearchChoice: function(term, data) {
			if (!data.length){

				// $.ajax to create entry
				// add entry to list

				return { id: term, text: term };
			}

		},
        // todo. 
		initSelection: function(element, callback) {
			// the input tag has a value attribute preloaded that points to a preselected repository's id
			// this function resolves that id attribute to an object that select2 can render
			// using its formatResult renderer - that way the repository name is shown preselected
			//var id = $(element).val();
			//if (id !== "") {
			//	$.ajax("https://api.github.com/repositories/" + id, {
			//		dataType: "json"
			//	}).done(function(data) { callback(data); });
			//}
		},

	}


	if (options){
		var options = $.extend(true, init, options);
	} else {
		options = {};
	}

	console.log('select2_ajax', init, options);

	$('.select2_ajax_applied', context).select2('destroy').removeClass('select2_ajax_applied');
	$('.select2_ajax', context).addClass('select2_ajax_applied').select2(options);

	fuel.fields.inline_edit_field();
}

/**
 * Select2 v4
 */

fuel.fields.select2v4_ajax = function(context, options){


	var init = {
		placeholder: "Search for a repository",
		minimumInputLength: 1,
		dataType: 'json',
		ajax: {
			url: '',
			dataType: 'json',
			quietMillis: 250,
			//data: function (term, page) {
			//	return {
			//		q: term, // search term
			//	};
			//},
			//results: function (data, page) {
			//	// parse the results into the format expected by Select2.
			//	// data.results = [
			//	// 	{id: 2, text: 'Option 1'},
			//	// 	{id: 3, text: 'Option 12'},
			//	// ]
			//	// since we are using custom formatting functions we do not need to alter the remote JSON data
			//	return data;
			//},
			cache: true
		},
		// write entry if not exist
		// @see https://stackoverflow.com/a/55247654/814031
		createSearchChoice: function(term, data) {
			if (!data.length){
				// $.ajax to create entry
				// add entry to list
				return { id: term, text: term };
			}

		}
	}


	if (options){
		var options = $.extend(true, init, options);
	} else {
		options = {};
	}

	console.log('select2_ajax', init, options,context);
	if($('.select2_ajax_applied', context).length)
		$('.select2_ajax_applied', context).select2('destroy').removeClass('select2_ajax_applied');

	$('.select2_ajax', context).addClass('select2_ajax_applied').select2(options);

	fuel.fields.inline_edit_field();
}