Автозаполнение автозаполнения codemirror после любого нажатия клавиши?

Я работаю над попыткой добавить пользовательский автозаполнение, которое я хочу запускать всякий раз, когда пользователь печатает (настраивается, конечно). Я нашел несколько примеров автозаполнения для codemirror:

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

Но оба эти триггера на определенных клавишах (Control-Space для одного и "<" для другого), и оба используют функцию extraKeys для обработки событий, но я хочу запускать с любого ключа. Я пробовал следующее:

        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');
             }
        });

Но не повезло. Любые предложения о том, как я мог бы запускать из любых событий keyup?

Ответ 1

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

Ответ 2

Для версии 5.7 ни одно из ранее предложенных решений не работает для меня (и я думаю, что у них есть ошибки даже для более ранних версий). Мое решение:

    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});
        }
    });

Как это работает:

Это открывает всплывающее окно автозаполнения только в том случае, если оно еще не открыто (иначе клавиатурная навигация заставила бы снова открыть всплывающее окно с выбранным первым элементом).

Когда вы нажимаете кнопку "Enter", вы хотите закрыть всплывающее окно, поэтому это особый случай символа, который не должен запускать автозаполнение (вы можете рассмотреть случай, когда вы хотите показать antocompletion для пустой строки, хотя).

Затем последнее исправление устанавливает completeSingle: false, которое предотвращает случай, когда вы вводите какое-то слово, а посередине оно автоматически завершается, и вы продолжаете вводить текст с помощью рефлекса. Таким образом, пользователю всегда нужно выбрать нужную строку из всплывающего окна (даже если это единственная опция).

Ответ 3

Чтобы отобразить виджет автозаполнения:

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

Ответ 4

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

Насколько я понял, "inputRead" - лучшее событие для показа "автозавершений" в "codemirror". Единственный недостаток заключается в том, что вы не можете отображать подсказки по обратному пространству или удалению.

Ответ 5

Наибольшее поведение, подобное IntelliSense, может быть достигнуто следующим образом:

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 });
    }
});

Ответ 6

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

он может работать

Ответ 7

изменил Александр Пшеничный ответ немного (см. здесь), отвечая, как я не могу добавлять комментарии

Код ниже позволяет автозаполнение только при нажатии буквенной клавиши (вероятно, что вы хотите вместо любой клавиши)

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});
    }
});

(это должно работать логически, но некоторые могут прокомментировать, если это работает или нет!)

Ответ 8

Позвольте мне поделиться полным примером, который содержит автозаполнение (для hive sql) после любой клавиатуры:

Включить скрипты и стили:

<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>

Script:

<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 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>

Ответ 9

Я думаю, что у каждого есть свои варианты использования. Мне также приходилось отбирать части из разных ответов, чтобы сделать что-то лучшее для моего случая.

По моему мнению, я хочу показывать предложения только на алфавитах, цифрах и (.) За исключением нажатой клавиши ctrl. потому что иногда я копирую или вставляю что-то, так что не следует открывать предложения. 46 ASCII для (.), Который я включил с числами.

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});
  }
});

Не забудьте включить 3 вещи -

js и css show hint - <link rel="stylesheet" href="codemirror/addon/hint/show-hint.css"> <script src="codemirror/addon/hint/show-hint.js"></script>
скрипт для языка, для которого вы хотите получить подсказку - для ex - javascript <script src="codemirror/addon/hint/javascript-hint.js"></script>
включите эту строку при инициализации вашего редактора кода. Я использовал подсказку javascript. hint: CodeMirror.hint.javascript

Ответ 10

Используйте эту функцию для автозаполнения codeMirror без CTRL + Пробел.

установите completeSingle в false в 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);
    }
});