XForms/Incremental Find

Motivation

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

↑Jump back a section

Method

↑Jump back a section

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>
↑Jump back a section

Acknowledgments

This example was created by Alain Couthures of agencexml.com

↑Jump back a section
Last modified on 2 February 2010, at 16:20