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 發現了錯誤並進行了修復。