XForms/Incremental Find

Motivation

You want to show a sample list of search keywords as the user types them into a search field.

Method

Sample Code

<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&amp;format=json&amp;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

This example was created by Alain Couthures of agencexml.com