XForms/Incremental Find
Appearance
< XForms
Motivation
[edit | edit source]You want to show a sample list of search keywords as the user types them into a search field.
Method
[edit | edit source]Sample Code
[edit | edit source]<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">
<head>
<title>Wikipedia Open Search Test Form</title>
<xf:model>
<xf:instance>
<root xmlns="">
<search/>
</root>
</xf:instance>
<!-- the search results are loaded into this instance and have the form item/item due to JSON arrays -->
<xf:instance id="results">
<root xmlns=""/>
</xf:instance>
<!-- this checks the input value is in the results regardless of lowercases or uppercases -->
<xf:bind nodeset="search" constraint="instance('results')/item[2]/item[translate(.,'ABCDEFGHIJKLMNOPQRSTUVWXYZ','abcdefghijklmnopqrstuvwxyz') = translate(current(),'ABCDEFGHIJKLMNOPQRSTUVWXYZ','abcdefghijklmnopqrstuvwxyz')]"/>
<xf:submission id="s1" method="get" replace="instance" instance="results" serialization="none" mode="synchronous">
<xf:resource value="concat('http://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=',search)"/>
</xf:submission>
<!-- this puts the cursor in the search field when the form loads -->
<xf:setfocus ev:event="xforms-ready" control="search"/>
</xf:model>
</head>
<body>
<h1>Wikipedia Open Search Test Form</h1>
<p>Please enter a subject in the following field. The value is not case sensitive but it has to exist in the results of the corresponding search.</p>
<xf:input id="search" ref="search" incremental="true">
<xf:label>Search: </xf:label>
<!-- for each key press send the s1 search out -->
<xf:send submission="s1" ev:event="xforms-value-changed"/>
</xf:input>
<xf:repeat nodeset="instance('results')/item[2]/item">
<xf:output value="."/>
</xf:repeat>
</body>
</html>
Acknowledgments
[edit | edit source]This example was created by Alain Couthures of agencexml.com