Title: Auto complete Last modified: March 9, 2020 --- # Auto complete * [streamworksaudio](https://wordpress.org/support/users/streamworksaudio/) * (@streamworksaudio) * [6 years, 1 month ago](https://wordpress.org/support/topic/auto-complete-6/) * I am not sure this plugin is being supported or furthered worked on, however I was wondering if there is a way to add ‘autocomplete’ to a code field? I know that when enabling the built in Codemirror on WordPress text fields the auto complete is on. However this is now option with this plugin to do that. * Possible? * Cheers! Viewing 2 replies - 1 through 2 (of 2 total) * [EdwardN](https://wordpress.org/support/users/edwardn/) * (@edwardn) * [6 years, 1 month ago](https://wordpress.org/support/topic/auto-complete-6/#post-12523824) * I too struggled with this and the fact it does not display properly in blocks– the theme gets lost. * In the end I implemented my own solution, which displays in blocks and autocomplete works fine: * 1. Enqueue a javascript file for the backend only: * ``` add_action('admin_enqueue_scripts','cm_load_admin_script'); function cm_load_admin_script( $hook ){ wp_enqueue_script( 'cm_admin_script', //unique handle get_template_directory_uri().'/path-to/cm-admin-scripts.js', //location array('jquery') //dependencies ); } ``` * 2. Load the WP codemirror assets – this just makes sure we have all the assets we need for cm-admin-scripts.js to work: * ``` add_action('admin_enqueue_scripts', 'codemirror_enqueue_scripts'); function codemirror_enqueue_scripts($hook) { $cm_settings_scss['codeEditor'] = wp_enqueue_code_editor(array('type' => 'text/x-scss')); wp_localize_script('jquery', 'cm_settings_scss', $cm_settings_scss); wp_enqueue_script('wp-theme-plugin-editor'); wp_enqueue_style('wp-codemirror'); } ``` * 3. We need cm-admin-scripts.js to setup different editor types. This is where the magic happens. Add one of these classes to an acf textarea field: html-editor, scss-editor or js-editor: * ``` jQuery(document).ready(function ($) { function initCodeMirrors() { $('.scss-editor textarea').each(function (e) { let editorSettings = wp.codeEditor.defaultSettings ? _.clone(wp.codeEditor.defaultSettings) : {}; editorSettings.codemirror = _.extend( {}, editorSettings.codemirror, { indentUnit: 2, tabSize: 2, mode: 'text/x-scss', autoRefresh: true, } ); wp.codeEditor.initialize($(this), editorSettings); }); $('.html-editor textarea').each(function (e) { let editorSettings = wp.codeEditor.defaultSettings ? _.clone(wp.codeEditor.defaultSettings) : {}; editorSettings.codemirror = _.extend( {}, editorSettings.codemirror, { indentUnit: 2, tabSize: 2, mode: 'htmlmixed', autoRefresh: true, } ); wp.codeEditor.initialize($(this), editorSettings); }); $('.js-editor textarea').each(function (e) { window.console.log('setting up js codeMirror'); let editorSettings = wp.codeEditor.defaultSettings ? _.clone(wp.codeEditor.defaultSettings) : {}; editorSettings.codemirror = _.extend( {}, editorSettings.codemirror, { indentUnit: 2, tabSize: 2, mode: 'javascript', autoRefresh: true, } ); wp.codeEditor.initialize($(this), editorSettings); }); } if (window.acf) { window.acf.addAction('load', initCodeMirrors); } }); ``` * This works for blocks the first time the page is loaded. It needs more work to get it to work for blocks as they are added to a page. If you are not using blocks then it should work just fine. I have a hack to refresh all codemirrors on a timer, checking to see if the texarea is visible or not: * ``` function refreshCodeMirrors() { $('.scss-editor textarea').each(function (e) { if ($(this).is(':visible')) { let editorSettings = wp.codeEditor.defaultSettings ? _.clone(wp.codeEditor.defaultSettings) : {}; editorSettings.codemirror = _.extend( {}, editorSettings.codemirror, { indentUnit: 2, tabSize: 2, mode: 'text/x-scss', autoRefresh: true, } ); wp.codeEditor.initialize($(this), editorSettings); } }); ... setInterval(refreshCodeMirrors,1000); ``` * But it is ugly. Gutenberg does not fire any js events, so no way of knowing via js if a block has been added. If anyone knows how to handle this more elegantly I would like to know. * There is a plugin which changes the default theme for all codemirror editors site-wide here: [https://wordpress.org/plugins/wp-codemirror-themes/](https://wordpress.org/plugins/wp-codemirror-themes/) * Not sure if this plugin is still maintained – but it should give you an idea of how codemirror works in WordPress. * Thread Starter [streamworksaudio](https://wordpress.org/support/users/streamworksaudio/) * (@streamworksaudio) * [6 years, 1 month ago](https://wordpress.org/support/topic/auto-complete-6/#post-12526037) * Thanks for the info! I have written similar code to apply Codemirror (using the version that comes with the WP core) to text fields that were created in custom metaboxes, I could not find out, however, how to apply CodeMirror themes to these textareas however (only the default wordpress codemirror theme). * Reading the CodeMirror documentation, I see… * > “CodeMirror is a code-editor component that can be embedded in Web pages. The > core library provides only the editor component, no accompanying buttons, auto- > completion, or other IDE functionality.” * So perhaps this plugin is loading only the core of CodeMirror (i.e no auto-complete). * Might be best in the long run then to create my own Metaboxes and Textfields and apply CodeMirror to them. But for now, I guess this plugin (and the basic core of CodeMirror) will have to do. I will revisit the idea of making my own boxes/fields when time permits. * Cheers! Viewing 2 replies - 1 through 2 (of 2 total) The topic ‘Auto complete’ is closed to new replies. * ![](https://s.w.org/plugins/geopattern-icon/acf-code-field_2b393f.svg) * [ACF Code Field](https://wordpress.org/plugins/acf-code-field/) * [Frequently Asked Questions](https://wordpress.org/plugins/acf-code-field/#faq) * [Support Threads](https://wordpress.org/support/plugin/acf-code-field/) * [Active Topics](https://wordpress.org/support/plugin/acf-code-field/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/acf-code-field/unresolved/) * [Reviews](https://wordpress.org/support/plugin/acf-code-field/reviews/) * 2 replies * 2 participants * Last reply from: [streamworksaudio](https://wordpress.org/support/users/streamworksaudio/) * Last activity: [6 years, 1 month ago](https://wordpress.org/support/topic/auto-complete-6/#post-12526037) * Status: not resolved