XForms/Repeat 过滤器
< XForms
您希望在您键入时动态显示与输入字段匹配的项目列表。这是对可能选项的逐字符增量筛选。这与其他“建议”选项的区别在于，可能选项的列表可以存储在实例中。
我们将把所有可能的选项放在一个xf:repeat语句中。当用户在输入字段中键入时，我们将使用 repeat xf:nodeset 属性中的 XPath 表达式缩小选择范围。XPath 表达式将仅匹配以 xf:input 字段中特定字符开头的项目。
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xs="http://www.w3.org/2001/XMLSchema">
<head>
<xf:model>
<xf:instance id="data" xmlns="">
<data>
<item>
<title>red</title>
</item>
<item>
<title>orange</title>
</item>
<item>
<title>yellow</title>
</item>
<item>
<title>green</title>
</item>
<item>
<title>blue</title>
</item>
<item>
<title>indigo</title>
</item>
<item>
<title>violet</title>
</item>
<item>
<title>black</title>
</item>
<item>
<title>biege</title>
</item>
<item>
<title>brown</title>
</item>
</data>
</xf:instance>
<xf:instance id="search" xmlns="">
<search>
<filter />
</search>
</xf:instance>
<xf:instance id="selected-data" xmlns="">
<data>
<item />
</data>
</xf:instance>
</xf:model>
</head>
<body>
<xf:input ref="instance('search')/filter" incremental="true">
<xf:label>Starts with filter: </xf:label>
</xf:input>
<br />
<xf:repeat
nodeset="instance('data')/item[title[starts-with(., instance('search')/filter)]]"
id="data-list">
<xf:trigger>
<xf:label>Select</xf:label>
<xf:action ev:event="DOMActivate">
<xf:setvalue
ref="instance('selected-data')/item"
value="instance('data')/item[title[starts-with(.,instance('search')/filter)]][index('data-list')]/title" />
</xf:action>
</xf:trigger>
<xf:output ref="title" />
</xf:repeat>
<xf:output ref="instance('selected-data')/item">
<xf:label>Selected: </xf:label>
</xf:output>
</body>
</html>
此示例中最具挑战性的部分是 setvalue 元素的 value 属性
<xf:setvalue
ref="instance('selected-data')/item"
value="instance('data')/item[title[starts-with(.,instance('search')/filter)]][index('data-list')]/title" />
我们正在设置所选数据实例的项目：ref=instance('selected-data')/item
我们需要将其设置为所选值 - 但第二部分 - [index('data-list')] - 是所选项目在过滤后的列表中的数字索引。这就是我们首先要过滤列表，然后从过滤后的列表中选择正确索引的原因。
就像在 repeat 的 nodeset 属性的限制中一样，我们正在重新运行 XPath 表达式并获取所有以过滤器中的文本开头的项目。
instance('data')item[title[starts-with(.,instance('search')/filter)]]
请注意，这与 repeat nodeset 属性中的表达式完全相同。
此列表还通过 data-list 上所选项目的 position 进行约束
[index('data-list')]
我们实际上是在对两组数据进行连续过滤。第一个生成与搜索相同的列表。第二个使用所选项目来选择正确的项目。
此示例最初由 Chris Sw... 于 2007 年 8 月 1 日发布在 mozilla XForms 开发者组。Sivaram Arabandi 发现了错误并进行了修复。