XForms, Repeat filter

Motivation

You want to dynamically display a list of items that match an input field as you type. This is character-by-character incremental filtering of possible options. The difference between this and other "suggest" options is that the list of possible options can be stored in an instance.

Method

We will put all of the possible choices inside of a xf:repeat statement. When the user types in the input field we will narrow down the choices using an XPath expression in the repeat xf:nodeset attribute. The XPath expression will only match items that begin with specific characters in the xf:input field.

Screen Images

Link to working XForms application

Repeat Filter

Sample Program

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">;

id="data" xmlns="">

red

orange

yellow

green

blue

indigo

violet

black

biege

brown

id="search" xmlns="">

/>

id="selected-data" xmlns="">

/>

ref="instance('search')/filter" incremental="true">
Starts with filter:

/>

nodeset="instance('data')/item[title[starts-with(., instance('search')/filter)]]"
id="data-list">

Select
ev:event="DOMActivate">

ref="instance('selected-data')/item"
value="instance('data')/item[title[starts-with(.,instance('search')/filter)]][index('data-list')]/title" />

ref="title" />

ref="instance('selected-data')/item">
Selected:

Discussion

The most challenging part of this example is the value attribute of the setvalue element:

ref="instance('selected-data')/item"
value="instance('data')/item[title[starts-with(.,instance('search')/filter)]][index('data-list')]/title" />

We are setting the item of the selected-data instance:
ref=instance('selected-data')/item

We need to set it to the selected value - but the 2nd part - [index('data-list')] - is the numeric index of the selected item in the filtered list. This is why we 1st have to filter the list and 2nd choose the right index out of the filtered list.

Just like in the restriction of the nodeset attribute of the repeat we are re-running the XPath expression and getting all of the items
that start with the text in the filter.

instance('data')item[title[starts-with(.,instance('search')/filter)]]

Note that this is exactly the same expression as in the repeat nodeset attribute.

This list is additionally constrained with the position of the selected item on the data-list:

[index('data-list')]

We are really doing consecutive filters on two sets of data. The first generates the same list as the search. The second uses the item selected to select the correct item.

Attribution

This example was originally posted on the mozilla XForms developer group by Chris Sw... on Aug 1st of 2007. A bug was found and fixed by Sivaram Arabandi.

Where this page came from

This page was imported from Wikibooks. From “XForms” on Wikibooks, by its contributors, under CC BY-SA 4.0. Changed here: set as a page; navigation and edit links left out; each image under its own licence, credited in its caption.

Nobody has written it yet — it is the source material at a new address, which is why search engines are asked to skip it and why no one earns from it. It is up for grabs: take it on, and it is yours to rewrite and to earn from.