diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/autoComplete.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/autoComplete.js index 192ccda7a..a3ce0bcd1 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/autoComplete.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/autoComplete.js @@ -9,12 +9,14 @@ * * options: * - * search : function(value, [done]) - * A function that is passed the current contents of the input whenever - * it changes. - * The function must either return auto-complete options, or pass them - * to the optional 'done' parameter. - * If the function signature includes 'done', it must be used + * search: function(value, [done]) + * A function that is passed the current contents of the input whenever + * it changes. + * The function must either return auto-complete options, or pass them + * to the optional 'done' parameter. + * If the function signature includes 'done', it must be used + * minLength: number + * If `minLength` is 0, pressing down arrow will show the list * * The auto-complete options should be an array of objects in the form: * { @@ -26,10 +28,11 @@ $.widget( "nodered.autoComplete", { _create: function() { - var that = this; + const that = this; this.completionMenuShown = false; - this.options.search = this.options.search || function() { return [] } - this.element.addClass("red-ui-autoComplete") + this.options.minLength = parseInteger(this.options.minLength, 1, 0); + this.options.search = this.options.search || function() { return [] }; + this.element.addClass("red-ui-autoComplete"); this.element.on("keydown.red-ui-autoComplete", function(evt) { if ((evt.keyCode === 13 || evt.keyCode === 9) && that.completionMenuShown) { var opts = that.menu.options(); @@ -71,8 +74,8 @@ this.completionMenuShown = true; }, _updateCompletions: function(val) { - var that = this; - if (val.trim() === "") { + const that = this; + if (val.trim().length < this.options.minLength) { if (this.completionMenuShown) { this.menu.hide(); } @@ -96,7 +99,7 @@ } } if (this.options.search.length === 2) { - var requestId = 1+Math.floor(Math.random()*10000); + const requestId = 1+Math.floor(Math.random()*10000); this.pendingRequest = requestId; this.options.search(val,function(completions) { displayResults(completions,requestId);}) } else { @@ -112,4 +115,12 @@ } } }); + function parseInteger(input, def, min, max) { + if(input == null) { return (def || 0); } + min = min == null ? Number.NEGATIVE_INFINITY : min; + max = max == null ? Number.POSITIVE_INFINITY : max; + let n = parseInt(input); + if(isNaN(n) || n < min || n > max) { n = def || 0; } + return n; + } })(jQuery); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js index 2d628769e..1d649d6e0 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js @@ -55,34 +55,46 @@ } var autoComplete = function(options) { + function getMatch(value, searchValue) { + const idx = value.toLowerCase().indexOf(searchValue.toLowerCase()); + const len = idx > -1 ? searchValue.length : 0; + return { + index: idx, + found: idx > -1, + pre: value.substring(0,idx), + match: value.substring(idx,idx+len), + post: value.substring(idx+len), + } + } + function generateSpans(match) { + const els = []; + if(match.pre) { els.push($('').text(match.pre)); } + if(match.match) { els.push($('',{style:"font-weight: bold; color: var(--red-ui-text-color-link);"}).text(match.match)); } + if(match.post) { els.push($('').text(match.post)); } + return els; + } return function(val) { var matches = []; options.forEach(opt => { - let v = opt.value; - var i = v.toLowerCase().indexOf(val.toLowerCase()); - if (i > -1) { - var pre = v.substring(0,i); - var matchedVal = v.substring(i,i+val.length); - var post = v.substring(i+val.length) - - var el = $('
',{style:"white-space:nowrap; overflow: hidden; flex-grow:1"}); - $('').text(pre).appendTo(el); - $('',{style:"font-weight: bold"}).text(matchedVal).appendTo(el); - $('').text(post).appendTo(el); - - var element = $('