I’m trying to build an external search dialog which can be shown onClick and which uses a button as well as the “return” key to submit the search query. I have managed to piece together enough information to build a rudimentary function which works, but it will only work for one search only. After this I need to refresh the page to make another one.
Here is the code I have up to now.
HTML:
<a href="javascript:void(0);" id="openSearch">Search dialog</a><div id="codemirror-search-box">
<input type="text" style="width: 10em" class="CodeMirror-search-field"/>
<button>Search</button>
<a href="javascript:void(0);" onClick="javascript:editor.execCommand('findPrev');">Prev</a>
<a href="javascript:void(0);" onClick="javascript:editor.execCommand('findNext');">Next</a>
JavaScript:
document.querySelector("#openSearch").onclick = function(){ editor.execCommand("find"); }; CodeMirror.prototype.openDialog = function (template, callback, options) {
document.getElementById("codemirror-search-box").style.display = "block";
var dialog = document.getElementById('codemirror-search-box');
var inp = dialog.getElementsByTagName("input")[0], button;
if (inp) {
var button = dialog.getElementsByTagName("button")[0];
CodeMirror.on(button, "click", function(e) {
callback(inp.value, e);
});
CodeMirror.on(inp, "keydown", function(e) {
if (e.keyCode == 13) {
callback(inp.value, e);
}
});
inp.focus();
}
};