The autocomplete feature in Codemirror seems to be failing specifically when writing JavaScript code

I am having trouble implementing the autocomplete feature in my JavaScript code editor using Codemirror. Can someone please help me figure out what I'm doing wrong?

Here is the snippet of code :

var editor = CodeMirror.fromTextArea(myTextarea, {
  lineNumbers: true,
  extraKeys: {
    "Tab": "autocomplete"
  },
  hint: CodeMirror.hint.javascript
});
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://codemirror.net/lib/codemirror.js"></script>
  <script src="https://codemirror.net/mode/javascript/javascript.js"></script>
  <script src="https://codemirror.net/addon/hint/show-hint.js"></script>
  <script src="https://codemirror.net/addon/hint/anyword-hint.js"></script>
  <link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css">
  <link rel="stylesheet" href="https://codemirror.net/addon/hint/show-hint.css">
  <title>Code</title>
</head>

<body>
  <textarea name="myTextarea" id="myTextarea" cols="30" rows="10"></textarea>

  </script>

javascripthtmlcsscodemirror

Answer №1

After conducting extensive research, including reviewing their website example and other sources, I have finally discovered a solution that works. Here is the code snippet:

 var editor = CodeMirror.fromTextArea(myTextarea, {
    lineNumbers: true,
    extraKeys: {"Ctrl-Space": "autocomplete"},
    mode: {name: "javascript", globalVars: true}
  });
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css">
  <link rel="stylesheet" href="https://codemirror.net/addon/hint/show-hint.css">
  <script src="https://codemirror.net/lib/codemirror.js"></script>
  <script src="https://codemirror.net/addon/hint/show-hint.js"></script>
  <script src="https://codemirror.net/addon/hint/javascript-hint.js"></script>
  <script src="https://codemirror.net/mode/javascript/javascript.js"></script>
  <script src="https://codemirror.net/mode/markdown/markdown.js"></script>
  <title>Code</title>
</head>

<body>
  <textarea name="myTextarea" id="myTextarea" cols="30" rows="10"></textarea>
</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to apply capitalization or convert the value of props to uppercase in React?

Despite attempting the toUpperCase method, I am unable to capitalize my props value. Here's the code I have: export default function Navbar(props) { return ( <> <div> <nav class="navbar navbar-expand-lg bg-b ...

javascriptreactjs

What is the best method to determine offsetTop in relation to the parent element instead of the top of

I have a straightforward inquiry: How can one determine the offsetTop of a child element in relation to its parent element rather than the top of the window? The definition of offsetTop indicates that it should give the distance by which a child element i ...

javascripthtmlcss

Sorry, we couldn't find the page you were looking for. The request method used was GET and the request URL was http://127.0.0.1:

I've previously reported this error without success, so I'm providing more details now. I am new to coding and recently started a Django & Python project, but encountered some issues. Despite three weeks of troubleshooting, the problems persist. ...

pythonhtmldjangodjango-models

Stopping videos in the JQuery Cycle Plugin triggers the stop event

Currently, I have a simple cycle set up with YouTube videos using the following code: <script type="text/javascript"> $(document).ready(function () { $('#cycle').cycle({ fx: 'fade', sp ...

javascripthtmljqueryjquery-events

Sliding in images with JQuery

I need help with animating the slide-in effect of 7 "card" images from the left to the center of the screen. I attempted to achieve this using the following code: function FetchCards() { $("#pack").css('margin-left', 0); $("#pack").css(& ...

javascriptjqueryhtmlcssimage

Display dynamic HTML content within an iframe using jQuery Fancybox

Looking to incorporate dynamic content from the server using ajax into a fancybox (iframe)? Check out this method that allows you to display the entire html page: index.html <html> <head> <link href="css/fancybox/jquery.fancybo ...

jqueryhtmlajaxfancybox

Prop type failure: The `actions` prop is specified as mandatory in the `Testing` component, however, its value is currently undefined

I am working on a project that involves creating a login form using React and Redux. Here's a snippet of my app.js: import React from 'react'; import { render } from 'react-dom'; import Input from 'react-toolbox/lib/input&apo ...

javascriptreactjsreduxreact-redux

Ways to display notifications when the user is not actively browsing the website?

How can websites display notifications even when the user is not actively on the site? Take Facebook messenger, for instance. Even with the page closed, notifications still pop up. The same goes for Twitter, which also sends push notifications. I ...

javascripthtmlnode.jsangularweb

Having difficulty displaying form errors using handlebars

My form validation is not working properly. When I enter incorrect information, it alerts correctly, but when I submit the form, it returns [Object object]. What could be causing this issue in my code and how should I handle the data? https://i.stack.imgu ...

javascriptnode.jsexpresshandlebars.js

I would prefer not to add another database table just to differentiate between team members and friends. Can you provide assistance with this?

Instead of creating another table named friends in Strapi and linking it to Visual Studio Code, I have opted to use a Characters table for both team members and friends. This way, I can input new data only at Characters and filter it to differentiate betwe ...

javascriptnode.jsreactjsnext.js

Display an iframe using React in multiple areas across the app with the same state

Within my React scenario, we display a BI dashboard using an iframe on the page, allowing users to interact with the frame and potentially filter the BI data. I've developed a feature that enables this iframe to expand into a full-screen dialog for en ...

javascriptreactjsiframeamazon-quicksight

Mastering CSS Sprites: A Guide to Aligning Sprite Buttons at the Bottom

In my web app, I have a bottom navigation bar with 9 buttons, each represented by a Sprite Image having 3 different states. The challenge I'm facing is aligning all the images at the bottom of the nav bar or div. The icons vary slightly in size, and ...

htmlcsscss-spritessprite

What is the process for extracting information from a middleware within a Next.js framework?

I have been working on developing an authentication system using JWT in Next.js. In order to achieve this, I created a middleware that can validate the JWT token and establish an authentication process as shown below: export default function middleware(req ...

javascriptreactjsnext.js

The process of sending parameters to an API in ReactJS: a guide

My objective is to target .....the values originating from login (can be anything)-> for example email:'[email protected]' password:'12345678' I am required to extract the username until "@" and use it as a username i ...

javascriptreactjsapireduxquery-string

HTML 5 File selection on iOS and Android using Cordova/Phonegap

I attempted to utilize the camera in a PhoneGap app using the HTML5 input tag as shown below. Create a new project through CLI Add iOS and Android platforms Incorporate the camera plugin Build for both devices Run on iPhone 5 with iOS 7.1.2 and Samsung N ...

androidioshtmlcordova

Tips for placing <div .right> above <div .left> when the window is small, given that <div .right> is positioned to the right of <div .left> when the window is large

I've come across a similar layout before, but I'm struggling to replicate it myself. The idea is to have text aligned on the left side with an image floated to the right. Instead of the image appearing below the text when the window size is red ...

javascriptjqueryhtmlcss

Angular 2: Encounter with 504 Error (Gateway Timeout)

I am struggling with handling errors in my Angular 2 application. Whenever the backend server is offline, an uncaught error appears in the console: GET http://localhost:4200/api/public/index.php/data 504 (Gateway Timeout) This is how my http.get me ...

javascriptphpangulartypescriptangular2-http

What are the best ways to resolve the warning from webpack in Express?

I have set up webpack to bundle both the server and client side code... Below is my webpack configuration: const webpack = require('webpack'); const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin&a ...

javascriptangularwebpack

What is the best way to show a nested object in an API request?

I am facing a challenge in utilizing scriplet tags in express to showcase conversion rates from a foreign exchange rate API using ejs. The JSON response is presented below, and my goal is to exhibit each conversion_rate key-value pair on the results.ejs p ...

javascriptnode.jsapiexpressejs

Issue with cutting of rotating pseudo element

Trying to rotate a pseudo element with a background-image is posing a challenge. The background, positioned at the center of the main element for visual effect, ends up being cut off when rotated. An illustrative example has been created using random imag ...

csspseudo-element