monacoEditorPlain.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.17.1/min/vs/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Register monaco editor	-->
<script type= text/javascript>
require.config({ paths: { 'vs': 'https://unpkg.com/monaco-editor@0.17.1/min/vs' }});
window.MonacoEnvironment = { getWorkerUrl: () => proxy };

let proxy = URL.createObjectURL(new Blob([`
	self.MonacoEnvironment = {
		baseUrl: 'https://unpkg.com/monaco-editor@0.17.1/min/'
	};
	importScripts('https://unpkg.com/monaco-editor@0.17.1/min/vs/base/worker/workerMain.js');
`], { type: 'text/javascript' }));

require(["vs/editor/editor.main"], function () {
	let editor = monaco.editor.create(document.getElementById('container'), {
		value: "using System; using System.Text;class Program{public void Main(){var sb= new StringBuilder();",
		language: 'csharp',
		theme: 'vs-dark'
	});

	// register editor for window
	window.monacoEditor = editor;

	monaco.languages.registerCompletionItemProvider('csharp', {
		triggerCharacters:["."],
		autoIndent:true,
		provideCompletionItems: function(model, position) {
			var word = model.getWordUntilPosition(position);
        	var range = {
				startLineNumber: position.lineNumber,
				endLineNumber: position.lineNumber,
				startColumn: word.startColumn,
				endColumn: word.endColumn
        	};

			if ((word.word).length<1 )
			{
				// fetch suggestion from server
				var pos = getLengthTillCusror(position);

				return fetchSuggestion(pos).then(function(res) {
						return {
							suggestions:res
						}
				})
			}
		}
	});
});

function getLengthTillCusror(position) {
	var lines = monacoEditor.getValue().split('\n');
	var lengthTillCursor = 0;

	for (var index = 0; index<position.lineNumber-1; index++) {
		lengthTillCursor += lines[index].length;
	}

	// if cursor is present in the middle of the line
	lengthTillCursor += position.column-1;

	return lengthTillCursor;
}

<!-- Fetch suggestions	-->
var BASE_URL = "http://localhost:64816/api/LanguageIntellisense/";
var GET_AUTO_COMPLETION_URL = BASE_URL+"GetAutoCompletion";
var GET_BASIC_AUTO_COMPLETION_URL = BASE_URL+"GetBasicAutoCompletion";

var basicSuggestion = [];

	function fetchSuggestion(posOfCursor) {
			return new Promise(function (resolve, reject) {
				const data = '{ "RawCode":' + JSON.stringify(monacoEditor.getValue()) +', "Language":"Csharp", "Pos": "'+ posOfCursor + '"}';
				$.ajax({
					url: GET_AUTO_COMPLETION_URL,
					type: "POST",
					contentType: "application/json; charset=utf-8",
					dataType: "json",
					data: data,
					success: function (response) {
						// As suggestions comes as string , eval evaluate a the string and provide us the array of object.
						resolve(eval(response.Result.Suggestions));
					},
					error: function (error) {
						console.log('Error ${error}')
						reject("Error");
					}
				});
			});
		}

		function fetchBasicSuggestion() {
				const data = '{"Language":"Csharp"}';
				$.ajax({
					url: GET_BASIC_AUTO_COMPLETION_URL,
					type: "POST",
					contentType: "application/json; charset=utf-8",
					dataType: "json",
					data: data,
					success: function (response) {
						// As suggestions comes as string , eval evaluate a the string and provide us the array of object.
						basicSuggestion = eval(response.Result.Suggestions);
					},
					error: function (error) {
						console.log(error);
					}
				});
		}

</script>

<style>
    html, body, #container {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
</style>
<div id="container"></div>