Incremental Find

XForms · Wikibooks

0%

Contents

    Text

    Size
    100%
    Theme
    Typeface
    Line length
    Spacing

    From Wikibooks, under CC BY-SA 4.0, as the source states it. This page at Wikibooks.

    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