XForms/Incremental Find

From Wikibooks, open books for an open world
Jump to navigation Jump to search

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]

    <title>Wikipedia Open Search Test Form</title>
            <root xmlns="">

        <!-- the search results are loaded into this instance and have the form item/item due to JSON arrays -->
	<xf:instance id="results">
                <root xmlns=""/>

        <!-- 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)"/>

        <!-- this puts the cursor in the search field when the form loads -->
	<xf:setfocus ev:event="xforms-ready" control="search"/>
      <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:repeat nodeset="instance('results')/item[2]/item">
	 <xf:output value="."/>


Acknowledgments[edit | edit source]

This example was created by Alain Couthures of agencexml.com