javascript - theme - simple mode codemirror

codemirror autocompletar después de cualquier keyup?

Question

Estoy trabajando para intentar agregar un autocompletado personalizado, que quiero activar cada vez que el usuario esté escribiendo (configurable, por supuesto). He encontrado un par de ejemplos de autocompletado para codemirror:

http://codemirror.net/demo/complete.html y http://codemirror.net/demo/xmlcomplete.html

Pero ambos disparadores en teclas específicas (Control-Space para una y ''<'' para la otra) y ambos usan la función de extraKeys para procesar los eventos, pero quiero disparar desde cualquier tecla. He probado lo siguiente:

        var editor = CodeMirror.fromTextArea(document.getElementById("code"),
        {
             lineNumbers: true,
             mode: "text/x-mysql",
             fixedGutter: true,
             gutter: true,
//           extraKeys: {"''.''": "autocomplete"}
             keyup: function(e)
             {
                console.log(''testing'');
             },
             onkeyup: function(e)
             {
                console.log(''testing2'');
             }
        });

Pero no han tenido suerte. ¿Alguna sugerencia sobre cómo podría desencadenar desde cualquier evento keyup?

Answer 1

Cambié un poco la respuesta de Oleksandr Pshenychnyy (ver here ), respondiendo porque no puedo agregar comentarios todavía

El código que aparece a continuación solo permite que se complete la función Autocompletar cuando se presiona una tecla de letra (probablemente en lugar de lo que desee en cualquier tecla)

editor.on("keyup", function (cm, event) {
if (!cm.state.completionActive &&   /*Enables keyboard navigation in autocomplete list*/
     event.keyCode > 64 && event.keyCode < 91){// only when a letter key is pressed
         CodeMirror.commands.autocomplete(cm, null, {completeSingle: false});
    }
});

(Esto debería funcionar lógicamente, ¡pero algunos podrían comentar si esto funciona o no!)

Answer 2

Creo que cada uno tiene sus propios casos de uso. También tuve que agrupar partes de diferentes respuestas para hacer algo que fuera mejor para mi caso.

Según yo, quiero mostrar sugerencias solo sobre alfabetos, números y (.) Con una excepción de la tecla Ctrl presionada. Porque a veces copio o pego algo, por lo que no debería abrir sugerencias. 46 ascii es para (.) Que he incluido con los números.

activeEditor.on("keydown", function (cm, event) {
  if (
    !(event.ctrlKey) &&
    (event.keyCode >= 65 && event.keyCode <= 90) || 
    (event.keyCode >= 97 && event.keyCode <= 122) || 
    (event.keyCode >= 46 && event.keyCode <= 57)
  ) {
    CodeMirror.commands.autocomplete(cm, null, {completeSingle: false});
  }
});

Recuerda incluir 3 cosas -

1. js y css de show hint - <link rel="stylesheet" href="codemirror/addon/hint/show-hint.css"> <script src="codemirror/addon/hint/show-hint.js"></script>

2. script para el lenguaje para el que desea la sugerencia - para ex - javascript <script src="codemirror/addon/hint/javascript-hint.js"></script>

3. incluye esta línea mientras inicias tu editor de código. He utilizado la sugerencia de JavaScript. hint: CodeMirror.hint.javascript

Answer 3

El comportamiento más parecido a IntelliSense se puede lograr con esto:

var ExcludedIntelliSenseTriggerKeys =
{
    "8": "backspace",
    "9": "tab",
    "13": "enter",
    "16": "shift",
    "17": "ctrl",
    "18": "alt",
    "19": "pause",
    "20": "capslock",
    "27": "escape",
    "33": "pageup",
    "34": "pagedown",
    "35": "end",
    "36": "home",
    "37": "left",
    "38": "up",
    "39": "right",
    "40": "down",
    "45": "insert",
    "46": "delete",
    "91": "left window key",
    "92": "right window key",
    "93": "select",
    "107": "add",
    "109": "subtract",
    "110": "decimal point",
    "111": "divide",
    "112": "f1",
    "113": "f2",
    "114": "f3",
    "115": "f4",
    "116": "f5",
    "117": "f6",
    "118": "f7",
    "119": "f8",
    "120": "f9",
    "121": "f10",
    "122": "f11",
    "123": "f12",
    "144": "numlock",
    "145": "scrolllock",
    "186": "semicolon",
    "187": "equalsign",
    "188": "comma",
    "189": "dash",
    "190": "period",
    "191": "slash",
    "192": "graveaccent",
    "220": "backslash",
    "222": "quote"
}

EditorInstance.on("keyup", function(editor, event)
{
    var __Cursor = editor.getDoc().getCursor();
    var __Token = editor.getTokenAt(__Cursor);

    if (!editor.state.completionActive &&
        !ExcludedIntelliSenseTriggerKeys[(event.keyCode || event.which).toString()] &&
        (__Token.type == "tag" || __Token.string == " " || __Token.string == "<" || __Token.string == "/"))
    {
        CodeMirror.commands.autocomplete(editor, null, { completeSingle: false });
    }
});

Answer 4

Para la versión 5.7, ninguna de las soluciones propuestas anteriormente funciona bien para mí (y creo que tienen errores incluso en versiones anteriores). Mi solución :

    myCodeMirror.on("keyup", function (cm, event) {
        if (!cm.state.completionActive && /*Enables keyboard navigation in autocomplete list*/
            event.keyCode != 13) {        /*Enter - do not open autocomplete list just after item has been selected in it*/ 
            CodeMirror.commands.autocomplete(cm, null, {completeSingle: false});
        }
    });

Cómo funciona:

Esto abre la ventana emergente de autocompletar solo si aún no está abierta (de lo contrario, la navegación con el teclado podría haber causado la reapertura de la ventana emergente con el primer elemento seleccionado de nuevo).

Cuando hace clic en Intro , desea que se cierre la ventana emergente, por lo que este es un caso especial de un personaje que no debería activar el autocompletado (aunque puede considerar un caso en el que desea mostrar el antocompletado para una línea vacía).

Luego, la última solución está configurando completeSingle: false que evita el caso cuando escribe una palabra y, en el medio, se completa automáticamente y continúa escribiendo por reflejo. Por lo tanto, el usuario siempre tendrá que seleccionar la cadena deseada de la ventana emergente (incluso si es una opción única).

Answer 5

Para mostrar también el widget de autocompletar:

onKeyEvent: function (e, s) {
    if (s.type == "keyup") {
        CodeMirror.showHint(e);
    }
}

Answer 6

Permítame compartir un ejemplo completo que contiene autocompletar (para hive sql) después de cualquier keyup:

Incluir scripts y estilos:

<link rel="stylesheet" href="/static/codemirror/lib/codemirror.css">
<link rel="stylesheet" href="/static/codemirror/theme/material.css">
<link rel="stylesheet" href="/static/codemirror/addon/hint/show-hint.css" />

<script type="text/javascript" src="/static/codemirror/lib/CodeMirror.js"></script>
<script type="text/javascript" src="/static/codemirror/mode/sql/sql.js"></script>
<script type="text/javascript" src="/static/codemirror/addon/hint/show-hint.js"></script>
<script type="text/javascript" src="/static/codemirror/addon/hint/sql-hint.js"></script>

HTML:

<textarea id="code" name="code" rows="4" placeholder="" value=""></textarea>

Guión:

<script>

    $(function () {
        initSqlEditor();
        initAutoComplete();
    });

    // init sql editor
    function initSqlEditor() {

        var editor = CodeMirror.fromTextArea(document.getElementById(''code''), {
            autofocus: true,
            extraKeys: {
                "Tab": "autocomplete"
            },
            hint: CodeMirror.hint.sql,
            lineNumbers: true,
            mode: ''text/x-hive'',
            lineWrapping: true,
            theme: ''material'',
        });

        editor.on(''keyup'', function(editor, event){
            // type code and show autocomplete hint in the meanwhile
            CodeMirror.commands.autocomplete(editor);
        });
    }

    /**
     * Init autocomplete for table name and column names in table.
     */
    function initAutoComplete() {

        CodeMirror.commands.autocomplete = function (cmeditor) {

            CodeMirror.showHint(cmeditor, CodeMirror.hint.sql, {

                // "completeSingle: false" prevents case when you are typing some word
                // and in the middle it is automatically completed and you continue typing by reflex.
                // So user will always need to select the intended string
                // from popup (even if it''s single option). (copy from @Oleksandr Pshenychnyy)
                completeSingle: false,

                // there are 2 ways to autocomplete field name:
                // (1) table_name.field_name (2) field_name
                // Put field name in table names to autocomplete directly
                // no need to type table name first.
                tables: {
                    "table1": ["col_A", "col_B", "col_C"],
                    "table2": ["other_columns1", "other_columns2"],
                    "col_A": [],
                    "col_B": [],
                    "col_C": [],
                    "other_columns1": [],
                    "other_columns2": [],
                }
            });
        }
    }

</script>

Answer 7

Utilice esta función para autocompletar codeMirror sin CTRL + Space.

establece completeSingle en falso en el archivo show-hint.js

editor.on("inputRead", function(instance) {
    if (instance.state.completionActive) {
            return;
    }
    var cur = instance.getCursor();
    var token = instance.getTokenAt(cur);
    if (token.type && token.type != "comment") {
            CodeMirror.commands.autocomplete(instance);
    }
});

Answer 8

editor.on("inputRead",function(cm,changeObj){
   // hinting logic
})

Por lo que he visto, "inputRead" es el mejor evento para mostrar "auto completions" en "codemirror". El único inconveniente es que no puede mostrar sugerencias sobre el retroceso o la eliminación.

Answer 9

editor.on(''keyup'', function(){
    CodeMirror.commands.autocomplete(editor);
});

puede funcionar

Answer 10

onKeyEvent: function(e , s){
                if (s.type == "keyup")
                {
                    console.log("test");   
                }
            }