Implement JQuery UI autocomplete feature in CKeditor

Question

I am trying to implement the JQuery UI autocomplete feature in the CKEditor, but it is not working. I saw some examples and solution where if the user types "#" the drop-down list shows up with options. What I want is the user to get autocomplete suggestions on the fly like in text editors while typing, from a list of words. I want something like the code under but in CKeditor, rather than a textarea.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Autocomplete - Multiple values</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="https://cdn.ckeditor.com/4.6.2/standard/ckeditor.js"></script>
</head>
<body>

<div class="ui-widget">
    <!--<input id="tags" size="50">-->
    <textarea id="tags"></textarea>
</div>
<script>
//    CKEDITOR.replace( 'tags' );
    $( function() {
        var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby",
            "Scala",
            "Scheme"
        ];
        function split( val ) {
            return val.split( / \s*/ );
        }
        function extractLast( term ) {
            return split( term ).pop();
        }

        $( "#tags" )
        // don't navigate away from the field on tab when selecting an item
            .on( "keydown", function( event ) {
                if ( event.keyCode === $.ui.keyCode.TAB &&
                    $( this ).autocomplete( "instance" ).menu.active ) {
                    event.preventDefault();
                }
            })
            .autocomplete({
                minLength: 0,
                source: function( request, response ) {
                    // delegate back to autocomplete, but extract the last term
                    response( $.ui.autocomplete.filter(
                        availableTags, extractLast( request.term ) ) );
                },
                focus: function() {
                    // prevent value inserted on focus
                    return false;
                },
                select: function( event, ui ) {
                    var terms = split( this.value );
                    // remove the current input
                    terms.pop();
                    // add the selected item
                    terms.push( ui.item.value );
                    // add placeholder to get the comma-and-space at the end
                    terms.push( "" );
                    this.value = terms.join( " " );
                    return false;
                }
            });
    } );
</script>

</body>
</html>

Answer 1

If you aren't limited by the autocomplete library, At.js was written to work with a specific tag - using @ for user references, or : for emoji. There is also a wiki page on how to integrate it with CKEditor.

Implement JQuery UI autocomplete feature in CKeditor

Question

1 answers

solution1
0 2017-04-03 11:42:31

Implement JQuery UI autocomplete feature in CKeditor

Question

1 answers

solution1 0 2017-04-03 11:42:31

solution1
0 2017-04-03 11:42:31