XForms/搜索表单

动机

您想要创建一个搜索表单，该表单使用单个输入文本字段并将搜索请求提交到远程 Web 服务器上的搜索服务。

讨论

我们都熟悉 Google 等搜索引擎的简单前端，它们显示一个简单的搜索字段。在第一个版本中，我们将演示两个简单的功能。1) 当表单加载时，输入光标将被定位在搜索字段中。当您按下“Enter”键时，搜索将自动执行。

我们还将讨论一种方法，让单个表单同时显示简单搜索和复杂搜索功能。

方法

我们将首先创建一个简单的搜索输入字段，并为其赋予“search-field”的 id。我们还将在输入中添加一个操作，当按下 Enter 键时，该操作将触发提交。

<xf:input ref="q" id="search-field">
   <xf:label>Search string:</xf:label>
   <xf:action ev:event="DOMActivate">
      <xf:send submission="search"/>
   </xf:action>
</xf:input>

在此示例中，q 是对我们将发送到远程服务器的查询字符串的引用。

从前面的示例中我们了解到，您可以通过将以下操作添加到您的模型中，让光标在表单加载时自动定位在搜索字段中

<xf:model>
  ...
  <xf:action ev:event="xforms-ready">
      <xf:setfocus control="search-field"/>
  </xf:action>
...
</xf:model>

屏幕图像

链接到 XForms 应用程序

加载 XForms 应用程序

示例程序

在此示例中，我们将创建一个 Google 搜索引擎的简单前端。Google 搜索引擎的 REST API 格式如下

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

在此 REST 查询中，参数为

hl = 语言（en 代表英语）
q = 搜索查询字符串

我们可以在我们的模型中创建一个具有这些参数的实例

<xf:instance xmlns="">
   <data>
      <hl>en</hl>
      <q></q>
   </data>
</xf:instance>

完整程序列表

<html
    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" >
    <head>
        <title>Google Search Example</title>
        <style type="text/css">  
         body {font-family: Helvetica, sans-serif}        
        </style>
        <xf:model>
            <xf:instance xmlns="" id ="search-params">
                <data>
                    <hl>en</hl>
                    <q></q>
                </data>
            </xf:instance>
        <!-- Send the search parameters to the Google search engine and replace this entire form with the results -->
            <xf:submission id="search-google" method="get" 
            action="http://www.google.com/search" replace="all"
            separator="&amp;"/>

        <!-- put the cursor in the first field when the form becomes ready -->
            <xf:action ev:event="xforms-ready">
                <xf:setfocus control="search-field"/>
            </xf:action>
        </xf:model>
    </head>
    <body>
        <h1>Google Search Example</h1>
        <xf:input ref="instance('search-params')/q" id="search-field">
            <xf:label>Search string:</xf:label>
            <xf:action ev:event="DOMActivate">
                <xf:send submission="search-google"/>
            </xf:action>
        </xf:input>
        <xf:submit submission="search-google">
            <xf:label>Search</xf:label>
        </xf:submit>
    </body>
</html>

讨论

您还可以将十几个其他参数发送到 Google 搜索服务。例如，如果您想将搜索结果限制到特定的网站或子网站，您只需添加一个额外的“site”参数，将搜索结果限制到该网站。例如，以下 URL 将将搜索结果限制到此维基教科书中的页面

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

请注意，由于正斜杠是搜索查询的一部分，因此它们被替换为%2F字符串。

您可能还会对 OpenSearch XML 标准感兴趣。此标准允许任何搜索服务指定搜索引擎的参数以及如何将数据返回给搜索客户端。

下一页：注释 | 上一页：设置初始光标
主页： XForms