Creating an intelligent auto-complete feature for json arrays in the ACE.js editor

Recently, I integrated Ace.js into my development workflow as a JavaScript editor. I even went ahead and created a custom JS file to enhance the functionality of my Ace editor with an autocompleter feature.

Here's a snippet from my personalized autoCompleter JS file:


var editorDefinitions = {
    "!name": "myeditor",
    "profilVerileri":
      [{ "test": "fsdf", "id": "1" }, { "test": "fsdf", "id": "2" }, { "test": "dasd", "id": "3" }],

Despite my efforts, I faced an issue where the autocompleter for arrays wasn't working as expected. See below for more details:

If you take a look at what I envision for the autocompleter:

"test" should be suggested after typing 'profilVerileri[i].'

Below is a glimpse of my complete code setup:


  var defs = [editorDefinitions];
    var ternServer = new TernServer({
      defs: defs
    });

    editor.ternTooltip = new TernTooltip(editor, ternServer);
    LangTools.addCompleter(ternServer);
    editor.setOptions({
        enableBasicAutocompletion: true
    });
    editor.focus();

Answer №1

Make sure to activate the live autocompletion feature

      editor.setOptions({
        enableBasicAutocompletion: true,      
        enableLiveAutocompletion: true,
      });

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

Child component being disabled by parent component using ng-disabled

While I'm delving into Angular js v1.5, I'm taking the opportunity to experiment with components. In this endeavor, I've come up with 2 components: A circular button, aptly named "circular button". A component that encapsulates a circular ...

Tips for managing accordion events using a button press

I found a script online that I want to modify. Specifically, I am looking to create a button that will control the accordion event by closing the current div and opening the next one. <button> Click me to open next</button> inside each div in ...

Display only distinct dates in the ng-repeat list

I'm trying to display an unordered list created using ng-repeat. Each list item includes a month header and a blog post. I'm struggling to find a clean solution to only show one instance of each month name without resorting to complex jQuery hac ...

Leveraging API data and dynamic JavaScript variables to establish a constant state in React.js

Struggling to search for a solution, hence the odd title. To give you a better idea, here's an example of what I'm looking for. Essentially, I need help replacing DATEHERE with a variable date that I've already set up. import React, { useSta ...

Page Not Found: React and Express Route Not Found

I encountered an error while attempting to use the sign-up route: POST http://localhost:3001/sign-up 404 (Not Found). I searched for similar issues on StackOverflow but couldn't pinpoint the source of my problem... In the frontend, I am fetching the ...

Adding ng-messages to a new input element that is generated dynamically in an AngularJS application using Material Design can be

I'm having an issue with my code. Everything is working fine except for the ng-messages part - they are not displaying as expected. I believe that ng-messages should be attached to the 'name' element, but it's not working in this case. ...

My Discord bot seems to be malfunctioning and failing to send out

I am new to discord.js and I'm having trouble getting my bot to respond with a message when I send one on the server. The bot shows as online in Discord and "Logged in!" appears in the console when I run it, so client.on("ready") seems to be working f ...

Unable to perform filtering on a nested array object within a computed property using Vue while displaying data in a table

Lately, I've been experimenting with different methods to filter data in my project. I've tried using various approaches like methods and watchers, but haven't quite achieved the desired outcome yet. Essentially, what I'm aiming for is ...

Get the zip file through a RESTful web service with the help of AngularJS

Utilizing REST jersey on the server side combined with AngularJS on the client side. My task involves downloading a zip file requested by the client for a specific date range. Server-side code: //Currently, I have hardcoded a single zip file for testing ...

When accessed, req.params may return undefined, though it actually returns :itemId as a string, making it seem like it is undefined instead of the expected id value

For the past few days, I've been struggling to figure out what's wrong with my code and have hit a dead end in finding a solution. I've attempted various methods such as querying for the id (moving controllers to shop routes and replacing & ...

Vercel and Firebase Realtime Database causing snapshot.val() to return null during build deployment

Creating a blog application using Next.js, Firebase Realtime Database, and Vercel for hosting has been seamless on my local machine. Even after running npm run build, everything functions perfectly. However, when deployed to Netlify in production, the snap ...

Setting up automatic live reloading and assets compiling using Webpack in a Drupal project: A step-by-step guide

I've successfully configured Webpack to compile Sass and JavaScript in my Drupal custom theme named amazon. The styles.scss and index.js files are compiled from the assets/scss/ and assets/js/ folders respectively, into styles.css and index.js in the ...

Jackson Configuration for Date in Java

I have implemented jackson configurator to handle serialization and deserialization of dates. Here is my current setup: SerializationConfig serConfig = mapper.getSerializationConfig(); serConfig.setDateFormat(new SimpleDateFormat("MM/dd/yyyy HH:mm:ss z") ...

Employing jQuery to populate information into an input field, yet encountering an issue where the data is not being successfully transmitted to

On my page, there is a form with an input box <input name="bid_price" id="bid_price" class="form-control"> If I manually enter a value, it gets posted successfully But when I try to insert a value using jQuery, it doesn't get posted, even tho ...

Tips for bringing in an npm package in JavaScript stimulus

Looking to utilize the imageToZ64() function within the zpl-image module. After installing it with: npm install zpl-image I attempted importing it using: import './../../../node_modules/zpl-image'; However, when trying to use the function like ...

Content Security Policy in Firefox Extension blocking local DataTables js

After downloading the js for DataTables, I attempted to load it onto my Firefox extension but encountered a Content Security Policy block: Content Security Policy: The page’s settings blocked the loading of a resource at self (“default-src moz-ext ...

Retrieving data from an API using a VBA function

Recently, I started working with JSON data in one of my macros. It's been quite a learning experience so far. I have managed to successfully call an API service and get back results from it. The service returns around 25 fields, but I only require spe ...

What is the best way for me to individually extend the 3 collapsible cards on the page

How can I modify the code in Mui5 to only expand one card at a time when clicking on the specific button of the card? To see my example code and demo, visit: https://codesandbox.io/s/optimistic-cerf-pelzk7?file=/demo.js Here is a snippet of the sample co ...

Choose a word at random from a JSON string

Utilizing JSONP, I have successfully retrieved a list of words from an external source to randomly select one for use in a game. The current source being used is as follows: function processResult(obj) { console.log(obj); var data = ...

Manipulate the JQuery code to alter the window's location

I am currently implementing ajax for loading my website content and am looking for a way to update the window location upon successful ajax completion. Is it feasible to update the window location to "/newpage" in order to allow users to navigate back and ...