XForms, Search Form

Motivation

You want to create a search form that uses a single input text field and submits a search request to a search service on a remote web server.

Discussion

We are all familiar with the simple front end to search engines like Google that display a simple search field. There are two simple features we will demonstrate in the first version. 1) The input cursor will be positioned in the search field when the form loads. When you press the "Enter" key the search will automatically be executed.

We will also discuss a way to have a single form display both simple search and complex search functions.

Method

We will first create a simple search input field and give it an id of "search-field". We will also add an action to the input that will fire off the submission when the Enter key is pressed.

ref="q" id="search-field">
Search string:
ev:event="DOMActivate">
submission="search"/>

In this example, q is a reference to the query string we will be sending to the remote server.

From the prior example we learned that you can have the cursor automatically positioned in the search field when the form loads by adding the following action added to your model:

...
ev:event="xforms-ready">
control="search-field"/>

...

Screen Image

Sample Google Search Form (Image: The original uploader was Dmccreary at English Wikibooks ., CC BY-SA 3.0)

Link to XForms Application

Load XForms Application

Sample Program

In this example we will create a simple front end to Google's search engine. The format of the REST API for the Google search engine is the following:

http://www.google.com/search?hl=en&q=XForms

In this REST query the parameters are:

• hl = language (en for English)
• q = search query string

We can create an instance that has these parameters in our model:

xmlns="">

en

Full Program Listing

xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:xs="http://www.w3.org/2001/XMLSchema"
xmlns:ev="http://www.w3.org/2001/xml-events" >

Google Search Example
type="text/css">
body {font-family: Helvetica, sans-serif}

xmlns="" id ="search-params">

en

id="search-google" method="get"
action="http://www.google.com/search" replace="all"
separator="&"/>

ev:event="xforms-ready">
control="search-field"/>

Google Search Example
ref="instance('search-params')/q" id="search-field">
Search string:
ev:event="DOMActivate">
submission="search-google"/>

submission="search-google">
Search

Discussion

You can also send over a dozen other parameters to the Google search service. For example if you want to restrict
the search results to a specific web site or sub-site you can just add an additional "site" parameter that restricts search results to that site. For example the following URL will restrict the search results to pages on this wikibook:

http://www.google.com/search?hl=en&q=xforms+site%3Ahttp%3A%2F%2Fen.wikibooks.org%2Fwiki%2FXForms

Note that because forward slashes are part of the search query they are replaced with a %2F string.

The OpenSearch XML standard may also be of interest.
This standard allows any search service to specify the parameters to a search engine and how the data is returned to
a search client.

Where this page came from

This page was imported from Wikibooks. From “XForms” on Wikibooks, by its contributors, under CC BY-SA 4.0. Changed here: set as a page; navigation and edit links left out; each image under its own licence, credited in its caption.

Nobody has written it yet — it is the source material at a new address, which is why search engines are asked to skip it and why no one earns from it. It is up for grabs: take it on, and it is yours to rewrite and to earn from.