Autocomplete non existent

[tudors-services]

Summary of problem or feature request

autoComplete type of button doesn't exist in Editor

Code snippet of problem

Code in Datatables JS script:

 "label": "Content:",
"name": "content",
"type": "autoComplete",
"opts": { "source": contentData, }

Code that should be in laravel:

Fields\AutoComplete::make('content')->options([source => contentData])

System details

• Operating System - Ubuntu 22.04.2 LTS \n \l
• PHP Version - PHP 8.2.2 (cli) (built: Feb 6 2023 07:08:08) (NTS)
• Laravel Version - "laravel/framework": "^10.0.3"
• Laravel-DataTables Version - "datatables.net-editor": "^2.1.0",

Additional questions

Is there any way of replacing / adding the buttons using added javascript or any chance of getting the button added in the framework ? Thank you.

[yajra]

You can use the generic Field. Will also add this when I got the chance, haven't seen autocomplete yet.

Fields\Field::make('content')->type('autoComplete')->options([source => contentData])

[tudors-services]

This is the code for the autoComplete:

/**
 * AutoComplete is a very useful way of providing input guidance to the end
 * user, providing the ease of selection of a `<select>` list with the
 * flexibility of a free form text input. This plug-in provides integration
 * between [jQuery UI's AutoComplete](http://jqueryui.com/) control and Editor,
 * adding the `autoComplete` field type to Editor.
 *
 * @name jQuery UI AutoComplete
 * @summary Use jQuery UI's AutoComplete library with Editor to allow easy and
 *     accurate input of data.
 * @requires jQuery UI's AutoComplete library
 * @depcss http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css
 * @depjs http://code.jquery.com/ui/1.10.0/jquery-ui.js
 *
 * @opt `e-type object` **`opts`**: jQuery UI AutoComplete initialisation
 *     options object. Please refer to the jQuery UI documentation for the full
 *     range of options available.
 *
 * @method **`node`**: Get the input element as a jQuery object that is used for
 *     the AutoComplete so you can run custom actions on it, including
 *     `autocomplete` methods. This is useful if you wish to update the data
 *     that is available to the AutoComplete control.
 *
 * @example
 *
 * new $.fn.dataTable.Editor( {
 *   "ajax": "php/dates.php",
 *   "table": "#example",
 *   "fields": [ {
 *       "label": "Genres:",
 *       "name": "genre",
 *       "type": "autoComplete",
 *       "opts": {
 *         "source": [
 *           // array of genres...
 *         ]
 *       }
 *     },
 *     // additional fields...
 *   ]
 * } );
 */

(function ($, DataTable) {

if ( ! DataTable.ext.editorFields ) {
        DataTable.ext.editorFields = {};
}

var _fieldTypes = DataTable.Editor ?
    DataTable.Editor.fieldTypes :
    DataTable.ext.editorFields;

_fieldTypes.autoComplete = {
        create: function ( conf ) {
                conf._input = $('<input type="text" id="'+conf.id+'">')
                        .autocomplete( conf.opts || {} );

                return conf._input[0];
        },

        get: function ( conf ) {
                return conf._input.val();
        },

        set: function ( conf, val ) {
                conf._input.val( val );
        },

        enable: function ( conf ) {
                conf._input.autocomplete( 'enable' );
        },

        disable: function ( conf ) {
                conf._input.autocomplete( 'disable' );
        },

        canReturnSubmit: function ( conf, node ) {
                if ( $('ul.ui-autocomplete').is(':visible') ) {
                        return false;
                }
                return true;
        },

        owns: function ( conf, node ) {
                if ( $(node).closest('ul.ui-autocomplete').length ) {
                        return true;
                }
                return false;
        },

        // Non-standard Editor method - custom to this plug-in
        node: function ( conf ) {
                return conf._input;
        },

        update: function ( conf, options ) {
                conf._input.autocomplete( 'option', 'source', options );
        }
};

})(jQuery, jQuery.fn.dataTable);

[tudors-services]

How could I integrate that with the way that Datatables is loaded in laravel ? If i use it normally i presume it won't find the class... Thank you.

[yajra]

It depends. If you're bundling, just add it in app.js.