AutoComplete

从 2.1.0 开始

向元素添加自动完成功能 <input>

选项

search (value, [done])

类型： function

当输入值更改时调用的函数，应返回可能完成的列表。

该函数可以采用一个或两个参数：

value - <input> 的当前值。
done - 将与完成一起调用的可选回调函数。

如果函数有两个参数，则必须使用结果进行调用，而不是返回结果。这允许函数执行异步工作以生成完成。done `

返回值完成列表必须是以下形式的对象数组：

{
    value: "<string>", // The value to insert if selected
    label: "<string>"|DOMElement  // The label to display in the dropdown
}

可以是 DOMElement。这可用于提供自定义显示完成 - 例如，包含更多上下文信息。label

方法

destroy()

从 <input> 中删除自动完成功能。

1	$(".input").autoComplete('destroy');

例子

在普通 `<input>` 上自动完成

1	<input type="text" id="node-input-example1">

// View the page source to see the full list of animals used in
// this example
let animals = ["Aardvark","Alligator","Alpaca","Anaconda","Ant","Antelope",
               "Carp","Cat","Caterpillar","Catfish","Cheetah","Chicken",
               "Deer","Dinosaur","Dog","Dolphin","Donkey","Dove" ];

$("#node-input-example1").autoComplete({
    search: function(val) {
        var matches = [];
        animals.forEach(v => {
            var i = v.toLowerCase().indexOf(val.toLowerCase());
            if (i > -1) {
                matches.push({
                    value: v,
                    label: v,
                    i: i
                })
            }
        });
        matches.sort(function(A,B){return A.i-B.i})
        return matches
    }
})

异步搜索

1	<input type="text" id="node-input-example2">

// View the page source to see the full list of animals used in
// this example
let animals = ["Aardvark","Alligator","Alpaca","Anaconda","Ant","Antelope",
               "Carp","Cat","Caterpillar","Catfish","Cheetah","Chicken",
               "Deer","Dinosaur","Dog","Dolphin","Donkey","Dove" ];

$("#node-input-example2").autoComplete({
    search: function(val, done) {
        var matches = [];
        animals.forEach(v => {
            var i = v.toLowerCase().indexOf(val.toLowerCase());
            if (i > -1) {
                matches.push({
                    value: v,
                    label: v,
                    i: i
                })
            }
        });
        matches.sort(function(A,B){return A.i-B.i})
        // Simulate asynchronous work by using setTimout
        // to delay response by 1 second
        setTimeout(function() {
            done(matches);
        },1000)
    }
})

自定义结果标签

1	<input type="text" id="node-input-example2">

// View the page source to see the full list of animals used in
// this example
let animals = ["Aardvark","Alligator","Alpaca","Anaconda","Ant","Antelope",
               "Carp","Cat","Caterpillar","Catfish","Cheetah","Chicken",
               "Deer","Dinosaur","Dog","Dolphin","Donkey","Dove" ];

$("#node-input-example3").autoComplete({
    search: function(val) {
        var matches = [];
        animals.forEach(v => {
            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 = $('<div/>',{style:"white-space:nowrap"});
                $('<span/>').text(pre).appendTo(el);
                $('<span/>',{style:"font-weight: bold; color:red"}).text(matchedVal).appendTo(el);
                $('<span/>').text(post).appendTo(el);

                matches.push({
                    value: v,
                    label: el,
                    i:i
                })
            }
        })
        matches.sort(function(A,B){return A.i-B.i})
        return matches
    }
})

EditableList Widget

元素的替换项本身可以是复杂元素。由核心和节点使用。<ol> Switch Change

选项

Options
addButton
addItem
buttons
connectWith
header
height
filter
resize
resizeItem
scrollOnAdd
sort
sortable
sortItems
removable
removeItem
方法

Methods
addItem
addItems
removeItem
width
height
items
empty
filter
show
sort
length
cancel

选项

addButton

类型：布尔值|字符串

确定列表下方是否显示一个按钮，单击该按钮时，将向列表中添加新条目。

如果未指定或设置为（boolean），则会显示一个带有文本 ‘Add’ 的按钮 true

如果设置为（boolean），则不会显示该按钮 false

如果设置为非空字符串，则使用其值作为按钮的文本来显示按钮。

1
2
3

$("ol.list").editableList({
    addButton: "pets"
});

addItem(row, index, data)

类型：函数

在将新项添加到列表时调用的回调函数。

row - 应向其添加任何行内容的 jQuery DOM 元素
index - 行的索引
data - 行的数据对象

如果它是通过单击“添加按钮”触发的，则将为 data {}。否则，它将是传递给 addItem 方法调用的数据。

$("ol.list").editableList({
    addItem: function(row, index, data) {
        $(row).html("Item "+index);
    }
});

buttons(array)

类型：数组

需要添加到 editableList 底部的 button 对象数组。每个 button 对象都可以具有以下属性：

label - （可选）按钮标签
icon - （可选）按钮图标
title - （可选）按钮工具提示文本
click - 单击按钮时将执行的回调函数

请注意，当 ‘add button’ 被激活时，它会隐式添加到这个数组中 addButton

$("ol.list").editableList({
    addItem: function(row, index, data) {
        $(row).html("Item "+index);
    }
    buttons: [{
        label: "with icon",
        icon: "fa fa-star",
        title: "my custom button",
        click: function(evt) {
            alert("button clicked");
        }
   }]
});

connectWith

类型：CSS 选择器

如果列表是可排序的，则此选项允许将项目从此列表拖动到任何其他 jQuery 列表，例如另一个 jQuery 列表。sortable editableList

1
2
3

$("ol.list").editableList({
    connectWith: ".my-other-list"
});

类型：DOM/JQuery 对象

插入 DOM/JQuery 对象作为列表的标题。

1
2
3

$("ol.list").editableList({
    header: $("<div>").append($.parseHTML("<div style='width:40%; display: inline-grid'>Name</div><div style='display: inline-grid'>Type</div>")),
});

height

类型：字符串|数

设置列表的高度，包括其 add 按钮（如果启用）。将 height 设置为 ‘auto’ 将删除垂直滚动条，并以包含内容所需的完整高度显示列表。

1
2
3

$("ol.list").editableList({
    height: 300
});

filter(data)

类型：函数

一个回调函数，用于筛选列表中可见的项目。

data - 行的数据对象

该函数应返回 /（布尔值）以指示该项应该是可见的。true false

$("ol.list").editableList({
    filter: function(data) {
        return data.index%2 === 0
    }
});

resize()

类型：函数

当列表大小发生变化时调用的函数。

$("ol.list").editableList({
    resize: function() {
        console.log("I have changed in size")
    }
});

resizeItem(row, index)

类型：函数

当列表大小发生变化时，对列表中的每个项目调用的函数。

row - 行的 jQuery DOM 元素
index - 行的索引

项目的原始数据存储在名为 data 的属性下。

该回调在主 resize 回调调用后调用。

$("ol.list").editableList({
    resizeItem: function(row,index) {
        var originalData = $(row).data('data');
        console.log("Resize the row for item:", originalData)
    }
});

scrollOnAdd

类型：布尔值

确定每当添加新项时，列表是否应自动滚动到底部。

如果未指定或设置为（boolean），则列表将滚动以显示新添加的项目 true

如果设置为（boolean），则列表将不会滚动 false

1
2
3

$("ol.list").editableList({
    scrollOnAdd: false
});

sort(itemDataA, itemDataB)

类型：函数

一个回调函数，用于比较列表中的两个项目以确定它们的顺序。

itemDataA - 数据项
itemDataB - 数据项

如果函数返回的值小于 0，则位于 itemDataA itemDataB

如果该函数返回 0，则项目保持不变。

如果函数返回的值大于 0，则位于 itemDataA itemDataB

$("ol.list").editableList({
    sort: function(dataA, dataB) {
        return dataA.index-dataB.index;
    }
});

sortable

类型：布尔值|CSS 选择器

确定是否可以拖动列表项以对其进行排序。

如果设置为（boolean），则默认拖动手柄将显示在项目旁边 true

如果设置为 CSS 选择器，则用于标识应用作项目内容元素中的拖动手柄的元素。

1
2
3

$("ol.list").editableList({
    sortable: true
});

sortItems(items)

类型：函数

在移动列表中的项后调用的函数。

items - 每行的 jQuery DOM 元素的 Array，按顺序排列。

每个行元素都存储名为 data 的属性下的项的原始数据。

$("ol.list").editableList({
    sortItems: function(items) {
        console.log("The items have changed order")
    }
});

removable

类型：布尔值

如果设置为 true，则每行都会在右侧显示一个删除按钮。单击该按钮将从列表中删除该行并触发 removeItem 回调（如果已设置）。

1
2
3

$("ol.list").editableList({
    removable: true
});

removeItem(data)

类型：函数

从列表中删除项时调用的函数。

data - 项的原始数据项

可以通过单击项目的 remove 按钮或调用 remoteItem 方法。

$("ol.list").editableList({
    removeItem: function(data) {
        console.log("An item has been removed")
    }
});

方法

addItem(itemData)

将项目添加到列表的末尾。是将与列表中的项目关联的对象。itemData

1	$("ol.list").editableList('addItem',{fruit:"banana"});

addItems(itemData)

将数组中包含的项添加到列表的末尾。是将与列表中的项关联的对象数组。itemData

1	$("ol.list").editableList('addItems',[{fruit:"banana"},{fruit:"apple"},{fruit:"pear"}]);

removeItem(itemData)

从列表中删除项目。是标识要删除的项目的对象。itemData

1	$("ol.list").editableList('removeItem',{fruit:"banana"});

width(width)

设置 editableList 的宽度。这必须用来代替 standard 函数，因为它可以确保组件正确调整大小 jQuery.width()

1	$("ol.input").editableList('width', '200px');

height(height)

设置 editableList 的高度。这必须用来代替 standard 函数，因为它可以确保组件正确调整大小。jQuery.height()

1	$("ol.input").editableList('height', '200px');

items()

类型：数组

获取所有列表项的 Array。每个项都是该项的 jQuery DOM 元素。

每个元素在名为 data 的属性下存储项的原始数据。

1	var items = $("ol.list").editableList('items');

empty()

清除所有项目的列表。这不会触发任何回调。

1	$("ol.list").editableList('empty');

filter(filter)

类型： Number

根据活动筛选功能筛选列表以显示/隐藏项目，并返回可见项目的数量。

有关 filter 函数的详细信息，请参阅。滤波器

如果未提供，则使用当前活动的 filter 函数过滤列表。滤波器

如果为 filter null，则删除过滤器。

1
2
3

var filteredCount = $("ol.list").editableList('filter',function(data) {
    return data.index%2 === 0
});

show(item)

自 0.20.0 起

滚动列表以确保特定项目在视图中。

1	$("ol.list").editableList('show', item);

sort(sort)

使用活动的 sort 函数对列表进行排序。

一个回调函数，用于比较列表中的两个项目以确定它们的顺序。

itemDataA - 数据项
itemDataB - 数据项

有关 sort 函数的详细信息，请参阅排序

如果未提供，则使用当前活动的 sort 函数对列表进行排序。sort

1
2
3

$("ol.list").editableList('sort', function(dataA, dataB) {
    return dataA.index-dataB.index;
});

length()

类型： Number

获取列表项的数量。

1	var length = $("ol.list").editableList('length');

cancel()

从 3.1.0 开始

取消对列表的项目排序作。

1	$("ol.list").editableList('cancel');

SearchBox Widget

为搜索输入提供常见功能的增强元素。<input>

选项
delay
minimumLength

方法
change
count
value

选项

delay

类型：数字

设置触发事件前最后一次击键后的延迟（以毫秒为单位）。change

minimumLength

类型：数字

设置输入触发事件之前的文本最小长度。将 input 清除为 0 将始终触发事件，而不管此设置如何。change change

方法

change()

在搜索输入上触发 change 事件。

1	$(".input").searchBox('change');

count(value)

设置搜索框上 count 标签的值。这可用于向用户提供反馈，了解搜索当前匹配了多少个“事物”。这是一个字符串。value

要遵循的标准模式是：

如果搜索框为空，请将其设置为可用项目的数量："300"
如果搜索框不为空，请将其设置为匹配项的数量以及可用项的数量：“120 / 300”

如果为 null、undefined 或空白，则隐藏 count 字段。value

1	$(".input").searchBox('count', '120 / 300');

value(value)

返回： String

获取搜索输入的当前值。

1	var type = $(".input").searchBox('value');

value(value)

设置搜索输入的当前值。

1	$(".input").searchBox('value','hello');

TreeList Widget

自 0.20.0 起

用于显示树状结构数据的列表。这是在 0.20.0 中添加的，并且功能相当小。

选项
data

方法
data
empty
show

事件
treelistselect
treelistmouseout
treelistmouseover

选项

data

类型：数组

树列表的初始数据。

树表示为项的 Array。这些是树结构中最顶层的项目。每个项都可能具有标识项的子项的属性。children

[
    {
        label: 'Local',
        icon: 'fa fa-rocket',
        children: [
            { label: "child 1"},
            { label: "child 2"}
        ]
    }
]

每个项可以具有以下属性：

字段	描述
`label`	项目的标签。
`id`	（可选）项目的唯一标识符
`class`	（可选）要应用于项目的 css 类
`icon`	（可选）要应用为图标的 css 类，例如 .`"fa fa-rocket"`
`checkbox`	（可选）如果已设置，则在项目旁边显示一个复选框。
`radio`	（可选）_自 2.1 起_如果已设置但未设置，则在项旁边显示一个单选框。该值应为用于对单选按钮进行分组的字符串。`checkbox`
`selected`	（可选）设置项目的初始选定状态。
`children`	（可选）标识此项目的子项。如果立即知道 children ，则可以作为数组提供，也可以作为函数异步获取 children 提供。有关详细信息，请参阅下文。
`expanded`	（可选）如果项目有子项，则设置是否显示子项
`deferBuild`	（可选）延迟为项目的子项构建任何 UI 元素，直到它首次展开。对于大型数据集，这可以带来显著的性能优势。
`element`	（可选）用于代替节点标签的自定义 DOM 元素。如果设置了 ID，则忽略此项。`label`

如果属性作为函数提供，则该函数应接受回调函数的单个参数。该回调函数应使用子项数组调用。这允许异步检索项目，例如通过 HTTP 请求。children

children: function(done) {
    $.getJSON('/some/url', function(result) {
        done(result);
    })
}

将项添加到 treeList 后，它将使用一些其他属性和函数进行扩充：

字段	描述
`item.parent`	树中的父项
`item.depth`	树中的深度，是树的根`0`
`item.treeList.container`	包含项目的 DOM 元素
`item.treeList.label`	包含标签的 DOM 元素

功能	描述
`item.treeList.remove(detach)`	从树中删除项目。设置为 to 保留项上的任何事件处理程序 - 如果要在其他位置重新添加项，则为 required。`detach true`
`item.treeList.makeLeaf(detachChildElements)`	将具有 children 的元素转换为叶节点，从而删除 UI 修饰。设置为以保留任何子元素事件处理程序。`detachChildElements true`
`item.treeList.makeParent(children)`	将项设为父项，添加子项
`item.treeList.insertChildAt(item, pos, select)`	在所需位置添加新项目，可选择在执行此作后选择它
`item.treeList.addChild(item, select)`	附加子项，可以选择在执行此作后选择它
`item.treeList.expand(done)`	展开项目以显示子项目，并在完成时调用可选回调`done`
`item.treeList.collapse()`	折叠项以隐藏其子项
`item.treeList.sortChildren(sortFunction)`	使用提供的 sort 函数对项目的子项进行排序。排序函数应与用于 `Array.sort（）` 的 compareFunction 匹配
`item.treeList.replaceElement(element)`	替换项目的自定义 DOM 元素

方法

data()

返回 treeList 显示的数据。

如果任何项目设置了 select 属性，则其值将反映当前的复选框状态。

data(item)

设置列表中显示的数据。

有关参数的详细信息，请参阅 data 选项。items

1	$(".input").treeList('data',[{label:"Colours"}]);

empty()

从列表中删除所有项目。

1	$(".input").treeList('empty');

show(itemId)

确保项目在列表中可见。该参数必须与列表中项的属性相对应。itemId ID

_注意：_这目前仅适用于列表中最顶层的项目。它不能用于显示树顶层以下的项目。

1	$(".input").treeList('show','my-red-item');

事件

treelistselect(event, item)

单击项时触发。如果项最初设置了该属性，则其值将更新以反映项的复选框的状态。selected

$(".input").on('treelistselect', function(event, item) {
    if (item.selected) {
        // The checkbox is checked
    } else {
        // The checkbox is not checked
    }
} );

treeListMouseOut(event, item)

当鼠标移出项目时触发。

1	$(".input").on('treelistmouseout', function(event, item) { });

treeListMouseOver(event, item)

当鼠标移动到项目上时触发。

1	$(".input").on('treelistmouseover', function(event, item) { });

TypedInput Widget

允许选择值类型的 regular 的替代项，包括 string、number 和 boolean 类型的选项。<input>

选项
default
types
typeField

方法
disable
disable
enable
hide
show
type
types
validate
value
width

事件
change

类型
TypeDefinition

选项

default

类型：字符串

如果已定义，则设置 typeField 输入的默认类型未设置。

1
2
3

$(".input").typedInput({
    default: "msg"
});

types

类型：数组

设置元素将提供的类型列表。

该选项的值是预定义类型的字符串标识符数组和任何自定义类型的 TypeDefinition 对象数组。

预定义类型包括：

标识符	描述
`msg`	属性表达式`msg.`
`flow`	属性表达式`flow.`
`global`	属性表达式`global.`
`str`	一个字符串
`num`	一个数字
`bool`	布尔值
`json`	有效的 JSON 字符串
`bin`	一个 Node.js 缓冲区
`re`	正则表达式
`jsonata`	jsonata 表达式
`date`	当前时间戳
`env`	环境变量
`node`	属性表达式`node.`
`cred`	安全凭证

1
2
3

$(".input").typedInput({
    types: ["msg","str"]
});

typeField

类型： CSS 选择器

在某些情况下，最好已经有一个元素来存储 typedInput 的 type 值。此选项允许提供此类现有元素。随着 typedInput 的类型发生更改，提供的 input 的值也会发生变化。<input>

1
2
3

$(".input").typedInput({
    typeField: ".my-type-field"
});

在 Node-RED 节点中使用时，可以通过在节点的对象中添加一个条目来将此值存储为节点属性。这可确保将类型与节点配置中的值一起保存。defaults

<div class="form-row">
    <label>Example:</label>
    <input type="text" id="node-input-myField">
    <input type="hidden" id="node-input-myFieldType">
</div>

RED.nodes.registerType('example', {
    defaults: {
        myField: { value: "" },
        myFieldType: { value: "str" }
    },
    ...
    oneditprepare: function () {
        $("#node-input-myField").typedInput({
            typeField: "#node-input-myFieldType"
        });
    }
})

方法

disable(state)

从 Node-RED 1.2.7 开始

禁用当前启用的 typedInput。

可选参数可用于切换 typedInput 的 disabled/enabled 状态。如果为 true，则该元素将被禁用，否则将启用该元素。state``state

1	$(".input").typedInput('disable');

disabled()

从 Node-RED 1.2.7 开始

返回： Boolean

获取 typedInput 当前是否处于禁用状态。

1	$(".input").typedInput('disabled');

enable()

从 Node-RED 1.3.3 开始

当 typedInput 当前处于禁用状态时，请启用 typedInput。

1	$(".input").typedInput('enable');

hide()

当 typedInput 当前可见时隐藏它。

1	$(".input").typedInput('hide');

show()

当 typedInput 当前处于隐藏状态时显示它。

1	$(".input").typedInput('show');

type()

返回： String

获取 typedInput 的选定类型。

1	var type = $(".input").typedInput('type');

type(type)

设置 typedInput 的选定类型。

1	$(".input").typedInput('type','msg');

types(types)

设置 typedInput 提供的类型列表。请参阅 types 选项的描述。

1	$(".input").typedInput('types',['str','num']);

validate()

返回： Boolean

触发对 typedInput 的类型/值的重新验证。每当类型或值发生更改时，这都会自动发生，但此方法允许手动运行它。

1	var isValid = $(".input").typedInput('validate');

value()

返回： String

获取 typedInput 的值。

1	var value = $(".input").typedInput('value');

value(value)

设置 typedInput 的值。

1	$(".input").typedInput('value','payload');

width(width)

设置 typedInput 的宽度。

1	$(".input").typedInput('width', '200px');

事件

change(event, type, value)

当输入的类型或值发生更改时触发。

1	$(".input").on('change', function(event, type, value) {} );

_注意：_该属性是在 Node-RED 1.3 中添加的value

类型

TypeDefinition

对象描述可由 typedInput 元素提供的类型。TypeDefinition`

它是一个具有以下属性的对象：

字段	类型	必填	描述
`value`	字符串	是的	类型的标识符
`label`	字符串		要在类型菜单中显示的标签
`icon`	字符串		要在 type 菜单中显示的图标。这可以是图像 url 或 FontAwesome 4 图标，例如 .`"fa fa-list"`
`options`	数组		如果类型具有一组固定的值，则这是该值的字符串选项数组。例如，对于布尔类型。`["true","false"]`
`multiple`	布尔		如果已设置，则可以启用多个选项。`options`
`hasValue`	布尔		如果没有与类型关联的值，则设置为。`false`
`validate`	功能		用于验证类型值的函数。
`valueLabel`	功能		为给定值生成标签的函数。该函数采用两个参数：- 应在其中构建标签的 DOM 元素，以及 . `container value`
`autoComplete`	功能		_从 2.1.0 开始。_如果设置，则在输入上启用 autoComplete，使用此函数获取完成建议。有关详细信息，请参阅 autoComplete。此选项不能与一起使用，或者 `options hasValue=false valueLabel`

例子

内置 String、Number、Boolean 类型

1	<input type="text" id="node-input-example1">

$("#node-input-example1").typedInput({
    type:'str',
    types:['str','num','bool']
})

消息属性

1	<input type="text" id="node-input-example2">

$("#node-input-example2").typedInput({
    type:'msg',
    types:['msg']
})

流/全局上下文属性

1	<input type="text" id="node-input-example3">

$("#node-input-example3").typedInput({
    type:'flow',
    types:['flow','global']
})

从选项列表中选择

1	<input type="text" id="node-input-example4">

$("#node-input-example4").typedInput({type:"fruit", types:[{
    value: "fruit",
    options: [
        { value: "apple", label: "Apple"},
        { value: "banana", label: "Banana"},
        { value: "cherry", label: "Cherry"},
    ]
}]})

从选项列表中选择多个项目

1	<input type="text" id="node-input-example5">

$("#node-input-example5").typedInput({type:"fruit", types:[{
    value: "fruit",
    multiple: true,
    options: [
        { value: "apple", label: "Apple"},
        { value: "banana", label: "Banana"},
        { value: "cherry", label: "Cherry"},
    ]
}]})

类型化值的运行时处理

由于增强常规 HTML 的方式，其值为存储为字符串。例如，布尔值存储为和typedInput <input> "true" "false"

当存储为节点属性时，节点的运行时部分必须解析字符串以获取类型化的值。

提供了一个实用程序函数来处理 TypedInput 提供的内置类型。

1	RED.util.evaluateNodeProperty(value, type, node, msg, callback)

字段	类型	必填	描述
`value`	字符串	是的	要评估的属性
`type`	字符串	是的	属性的类型
`node`	节点	是的，对于某些类型	评估属性的节点
`msg`	Message 对象	是的，对于某些类型	要评估的 message 对象
`callback`	回调	yes，for / 类型 `flow global`	接收结果的回调

对于大多数类型，该函数可以同步使用，而无需提供回调。

1	const result = RED.util.evaluateNodeProperty(value, type, node)

对于 type，还应提供 message 对象：msg

1	const result = RED.util.evaluateNodeProperty(value, type, node, msg)

要处理和上下文类型，需要提供节点以及回调函数，因为上下文 access：flow global 的异步性质

RED.util.evaluateNodeProperty(value, type, node, msg, (err, result) => {
    if (err) {
        // Something went wrong accessing context
    } else {
        // Do something with 'result'
    }
})

AutoComplete

选项

方法

例子

在普通 <input> 上自动完成

异步搜索

自定义结果标签

EditableList Widget

选项

方法

SearchBox Widget

选项

方法

TreeList Widget

选项

方法

事件

TypedInput Widget

选项

方法

事件

类型

例子

内置 String、Number、Boolean 类型

消息属性

流/全局上下文属性

从选项列表中选择

从选项列表中选择多个项目

类型化值的运行时处理

在普通 `<input>` 上自动完成