The previous tutorial showed how to use a custom Autocompleter, but suffered from one autocompletion issue:
Once the user starts typing the text for the unit (let's say a 'p' for 'pixel(s)'), completion should stop (or even better, only suggest 'pixel(s)', because 'mm' doesn't start with 'p'). However, here it will just continue to suggest 'pixel(s)' as well as 'mm'.
This tutorial demonstrates how to stop autocompletion once the user started typing a value.
In the case here, it would actually be better to filter suggested options according to what the user typed, (and this will be shown in the next tutorial), but there are cases where stopping auto-completion after the user started to type is important: This is particularly the case if e.g. entering numbers: As long as nothing is entered, auto-completion should indicate what needs to be entered (e.g. a placeholder with a name), but once the user started typing a number, auto-completion should be quiet. BTW: This is not only true for numbers, but for also e.g. when entering a name for something.
For details, see also
<!doctype html>
<html>
<body>
<!-- The HTML element that will hold the editor -->
<div id="nls-container"></div>
<!-- The only javascript file needed for nlScript -->
<script src="https://cdn.jsdelivr.net/npm/@nlscript/nlscript@0.3.0/dist/umd/nlScript.js"></script>
<!-- Load the library for the actual processing -->
<script src="preprocessing.js"></script>
<script>
let preprocessing = new Preprocessing("output");
preprocessing.setPixelWidth(0.25, "mm");
let parser = new nlScript.Parser();
let imageUnits = "";
parser.addParseStartListener(() => {
imageUnits = preprocessing.getUnits();
});
parser.defineType("units", "{unitstring:[a-zA-Z()]:+}",
pn => pn.getParsedString() !== "pixel(s)",
// The only change here, compared to the previous version, is
// to check whether the user has started typing for 'units', in
// which case pn.getParsedString() returns what's already entered.
// If something was entered, a special 'veto' autocompleter is returned,
// which prohibits further auto-completion.
(pn, justCheck) => pn.getParsedString().length === 0
? nlScript.Autocompletion.literal(pn, ["pixel(s)", imageUnits])
: nlScript.Autocompletion.veto(pn));
parser.defineType("filter-size", "{stddev:float} {units:units}", pn => {
let stddev = pn.evaluate("stddev");
let units = pn.evaluate("units");
if(units)
stddev /= preprocessing.getPixelWidth();
return stddev;
}, true);
parser.defineSentence(
"Apply Gaussian blurring with a standard deviation of {stddev:filter-size}.",
pn => {
let stdDev = pn.evaluate("stddev");
preprocessing.gaussianBlur(stdDev);
preprocessing.show("output");
return undefined;
});
new nlScript.ACEditor(parser, document.getElementById("nls-container"));
</script>
</body>
</html>
