Hello stackOverflow munity, this is my first question here and I'm wondering how to enable the Search Box in an Ace Editor.

I have a current demo of the project here. So far the editor has Emmet and Autoplete. The next feature I need is the search box showing when the user presses CTRL+F in the editor.

Here is the code I used to configure the editor:

let e = document.querySelector("#editor");
let editor = ace.edit(e);
let langTools = ace.require("ace/ext/language_tools");
let Emmet = require("ace/ext/emmet");
ace.config.set("basePath", "path");
ace.config.loadModule("ace/ext/searchbox", function(m) {m.Search(editor)});


editor.getSession().setMode("ace/mode/html");
editor.setOptions({
    minLines: 24,
    maxLines: 24,
    enableBasicAutopletion: true,
    enableSnippets: true,
    enableLiveAutopletion: true,
    enableEmmet: true
});
editor.session.setUseWrapMode(true);
editor.session.on("change", function () {
    window.onbeforeunload = function () {
        return "Changes you made might not be saved";
    };
    var unloadListener = function () {
        return "Changes you made might not be saved";
    };
    window.addEventListener("beforeunload", unloadListener);
    editor.execCommand("find")
});

Can someone please help me to figure out what scripts to import and how to enable it? Thanks.

Hello stackOverflow munity, this is my first question here and I'm wondering how to enable the Search Box in an Ace Editor.

I have a current demo of the project here. So far the editor has Emmet and Autoplete. The next feature I need is the search box showing when the user presses CTRL+F in the editor.

Here is the code I used to configure the editor:

let e = document.querySelector("#editor");
let editor = ace.edit(e);
let langTools = ace.require("ace/ext/language_tools");
let Emmet = require("ace/ext/emmet");
ace.config.set("basePath", "path");
ace.config.loadModule("ace/ext/searchbox", function(m) {m.Search(editor)});


editor.getSession().setMode("ace/mode/html");
editor.setOptions({
    minLines: 24,
    maxLines: 24,
    enableBasicAutopletion: true,
    enableSnippets: true,
    enableLiveAutopletion: true,
    enableEmmet: true
});
editor.session.setUseWrapMode(true);
editor.session.on("change", function () {
    window.onbeforeunload = function () {
        return "Changes you made might not be saved";
    };
    var unloadListener = function () {
        return "Changes you made might not be saved";
    };
    window.addEventListener("beforeunload", unloadListener);
    editor.execCommand("find")
});

Can someone please help me to figure out what scripts to import and how to enable it? Thanks.

• javascript
• ace-editor

Share Improve this question Follow asked Mar 17, 2021 at 21:35 IroncladDevIroncladDev 15222 silver badges1010 bronze badges 1

• 1 ace.config.set("basePath", "path"); is probably a mistake ext-searchbox.js file is located at /path/ext-searchbox.js on your site – a user Commented Apr 13, 2021 at 13:14

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

It should be built into a standard build.

editor.execCommand('find');

should display the searchBox. You can also use

editor.searchBox.show();
editor.searchBox.hide();

to show it manually (ie to implement your own key bindings). Ace has built in key bindings and there are advantages to using them (as well as disadvantages, such as they only work when you are focused on the editor). You should disable the internal "find" mand if you're going to implement your own.