MagicSuggest Field plugin and Editor

bradmacgregor

I had one issue with this plugin. The datatable editor, or more specifically the bootstrap implementation of it (editor.bootstrap.js), adds the form-control bootstrap css class to all text inputs in the control:

$('input:not([type=checkbox]):not([type=radio]), elect, textarea', field.node() ).addClass( 'form-control' );

But, my control has an input nested within a div that has that class already. The end result is that the style is messed up on the control making it taller than it should be. This class should be more surgically adding classes where it needs them.

I worked around this by removing the class when the fields are updated, which for me is each time I initEdit.

Here is my plugin for MagicSuggest:

(function ($, DataTable) {
    if ( ! DataTable.ext.editorFields ) {
        DataTable.ext.editorFields = {};
    }
    let editor = DataTable.Editor;

    DataTable.ext.editorFields.magicsuggest = {
        create: function (conf) {
            //build the control within a div and return it
            conf._magicsuggest = $('<div>', {id: editor.safeId(conf.id)}).magicSuggest({
                valueField: 'id',
                displayField: 'name',
                groupBy: 'group'
            });
            //container is a jquery object with the div node
            return conf._magicsuggest.container;
        },
        get: function (conf) {
            return conf._magicsuggest.getSelection();
        },
        set: function (conf, val) {
            conf._magicsuggest.setValue(val);
        },
        input: function (conf) {
            return conf._magicsuggest;
        },
        update: function (conf, values) {
            conf._magicsuggest.setData(values);
            //the form-control class in nested inputs make magicsuggest too tall. see editor.bootstrap.js
            conf._magicsuggest.container.find('input.form-control').removeClass('form-control');
        }
        // owns: function (conf, node) {return false;}
    };
})(jQuery, jQuery.fn.dataTable);

Here is the link to the library for those who are interested http://nicolasbize.com/magicsuggest/

allan

Really nice - thank you for sharing this with us! I haven't seen MagicSuggest before. It looks like an excellent component.

Regards,
Allan