фильтровать пользовательское автозаполнение в смешанном режиме html?

#javascript #html #jquery #filter #codemirror

Вопрос:

я пытаюсь отфильтровать пользовательский список слов в режиме подсказки/автозаполнения, но с некоторыми проблемами. Я добавил css:

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.2/codemirror.min.css"
    integrity="sha512-xIf9AdJauwKIVtrVRZ0i4nHP61Ogx9fSRAkCLecmE2dL/U8ioWpDvFCAy4dcfecN72HHB9 7FfQj3aiO68aaaw=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.2/addon/hint/show-hint.min.css"
    integrity="sha512-OmcLQEy8iGiD7PSm85s06dnR7G7C9C0VqahIPAj/KHk5RpOCmnC6R2ob1oK4/uwYhWa9BF1GC6tzxsC8TIx7Jg=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.2/addon/lint/lint.min.css"
    integrity="sha512-jP1 o6s94WQS9boYeDP3Azh8ihI5BxGgBZNjkABhx05MqH5WuDzfzSnoPxGxVzWi/gxxVHZHvWkdRM6SMy5B0Q=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
 

и js:

     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM"
    crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.2/codemirror.min.js"
    integrity="sha512-6Q5cHfb86ZJ3qWx47Pw7P5CN1/pXcBMmz3G0bXLIQ67wOtRF7brCaK5QQLPz2CWLBqjWRNH /bV5MwwWxFGxww=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.2/addon/hint/show-hint.min.js"
    integrity="sha512-kCn9g92k3GM90eTPGMNwvpCAtLmvyqbpvrdnhm0NMt6UEHYs DjRO4me8VcwInLWQ9azmamS1U1lbQV627/TBQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.2/addon/hint/xml-hint.min.js"
    integrity="sha512-WuVO/0caKHKP D/qCGcesy0yK0jbRq7ymsKS v4S2yPLfC3UG2afbteLTFpsiJC7X8x0HJ/SOODyjH8gQws2bQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.2/addon/hint/html-hint.min.js"
    integrity="sha512-oxBKDzXElkyh3mQC/bKA/se1Stg1Q6fm7jz7PPY2kL01jRHQ64IwjpZVsuZojcaj5g8eKSMY9UJamtB1QR7Dmw=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.2/addon/hint/sql-hint.min.js"
    integrity="sha512-GOlUf6o3j/ElIrQixctiGMJ0oUdpOTCSYyg4N7bDGLhRW8KKo6OLpCJMKs F4t2XXa1EL9Expcq4lkGgu1g0 Q=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.2/addon/hint/javascript-hint.min.js"
    integrity="sha512-HB0sEfERI4Pe2z7rbx7JVGS0SEEGbnAbV 9X0bs3Hs9R/nCYartwJQg16bK1P0jPsMzbiXjT kYNHYLCsHQ8HA=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.2/addon/edit/closetag.min.js"
    integrity="sha512-ZUq/bxUHwC35d3oP1hC5lshiHFCnI3dDtDPtSp9 CQDy/YU0LQu2ujDd603LuWho0G4XH8MSvyLV47x2Zcd8Jw=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.2/mode/xml/xml.min.js"
    integrity="sha512-XPih7uxiYsO igRn/NA2A56REKF3igCp5t0W1yYhddwHsk70rN1bbbMzYkxrvjQ6uk W3m qExHIJlFzE6m5eg=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.2/mode/javascript/javascript.min.js"
    integrity="sha512-9mEZ3vO6zMj0ub2Wypnt8owrHeoJCH22MkzeJ9eD3hca8/Wlqo5pEopI6HloA0F53f/RkRkHs8TyZMxbwVmnFw=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.2/mode/css/css.min.js"
    integrity="sha512-YeNG6eTv q p/vvx E5u05IBRurTlv0jfQuvitZMD oNe9TfrGw z4MHHxhPlE3X3csemC5YXlzDLMSZrgb34A=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.2/mode/htmlmixed/htmlmixed.min.js"
    integrity="sha512-IC qg9ITjo2CLFOTQcO6fBbvisTeJmiT5D5FnXsCptqY8t7/UxWhOorn2X GHkoD1FNkyfnMJujt5PcB7qutyA=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 

Затем я создал Codemirror в своей текстовой области:

         var myModeSpec = {
        name: "htmlmixed",
        tags: {
            style: [["type", /^text/(x-)?scss$/, "text/x-scss"],
            [null, null, "css"]],
            custom: [[null, null, "customMode"]]
        }
    }
    var editor = CodeMirror.fromTextArea(document.getElementById('editor'), {
        lineWrapping: true,
        lineNumbers: true,
        matchBrackets: true,
        mode: myModeSpec,
        theme: "ambiance",
        autoCloseBrackets: true,
        autoCloseTags: true,
        foldGutter: true,
        gutters: ["CodeMirror-lint-markers", "CodeMirror-linenumbers", "CodeMirror-foldgutter"],
        matchBrackets: {
            afterCursor: true,
            maxScanLines: 10000,
            maxScanLineLength: 100000
        },
        lint: true,
        matchTags: {
            bothTags: true
        },
        extraKeys: {
            "Ctrl-Space": "autocomplete",
        },
        autohint: true
    });
 

И я отменяю hint.html способ:

         var myHints = ["{{Test}}","{{Simple}}","{{Example.getFunction()}}"];
    var orig = CodeMirror.hint.html;
    CodeMirror.hint.html = function (cm) {
        var inner = orig(cm) || { from: cm.getCursor(), to: cm.getCursor(), list: [] };
        $.each(myHints, function (i, x) {
            inner.list.push(x);
        });
        return inner;
    };
 

Это добавит мой список к подсказкам html, но он не сможет фильтровать мои добавленные слова.
Есть ли способ фильтровать даже через них?
И могу ли я добавить свой собственный список в hint.html и подсказка.javascript без необходимости переопределять оба метода?
Спасибо

Комментарии:

1. может ли это вам помочь?

2. Это не совсем так, но это навело меня на мысль еще раз отфильтровать после того, как html-список будет заполнен html-тегами. Мне все еще нужно выполнять одну и ту же функцию для каждого типа подсказок(html, javascript, css). Я хочу использовать