化学元素的 XQuery/增量搜索

简介

在本例中，AJAX 以其 AHAH 形式实现了化学元素的增量搜索。这也是使用正则表达式匹配的一个例子。

执行

主页

主页是一个简单的 HTML 文件。id 为 list 的 div 元素是生成的內容放置的位置。当多个接口事件中的任何一个发生时，将调用 JavaScript 函数 getList()。

declare option exist:serialize "method=xhtml media-type=text/html
        doctype-public=-//W3C//DTD&#160;HTML&#160;4.01&#160;Transitional//EN
        doctype-system=http://www.w3.org/TR/loose.dtd";

<html xmlns="http://www.w3.org/1999/xhtml" >
   <head>
     <title>Chemical Elements</title>
      <script language="javascript" src="ajaxelement.js"/>
      <style type="text/css">
       td {{background-color: #efe; font-size:14px;}}
       th {{background-color: #ded; text-align: right; font-variant:small-caps;padding:3px; font-size:12px;}}
       </style> 
   </head>
    <body>
    <h1>Chemical Elements</h1>
    <table class="page">
    <tr>
    <td valign="top" width="30%"><form onSubmit="getList(); return false">
      <span><label for="name">Element Name </label> 
                     <input type="text" size="5" name="name" id="name" title="e.g. Silver"
                                   onkeyup="getList();" onfocus="getList();" />
       </span>
    </form>
    </td>
    <td id="list"/>
    </tr>
    </table>
    </body>
</html>

JavaScript

JavaScript 实现了一个简单的功能，即使用在搜索框中输入的字符串调用服务器端脚本 getElement.xq，并在回调中将返回的 XHTML 粘贴到 div 中。[ 此 JavaScript 不使用任何支持库，尽管使用例如 jQuery 可以简化它 ]

function updateList() {
  if (http.readyState == 4) {
      var divlist = document.getElementById('list');
      divlist.innerHTML = http.responseText;
      isWorking = false;
  }
}

function getList() {
  if (!isWorking && http) {
    var name = document.getElementById("name").value;
    http.open("GET", "getElement.xq?name=" + name);
    http.onreadystatechange = updateList;  
          // this sets the call-back function to be invoked when a response from the HTTP request is returned
    isWorking = true;
    http.send(null);
  }
}

function getHTTPObject() {
  var xmlhttp;
  /*@cc_on
  @if (@_jscript_version >= 5)
    try {
      xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (E) {
        xmlhttp = false;
      }
    }
  @else
  xmlhttp = false;
  @end @*/
  if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
    try {
      xmlhttp = new XMLHttpRequest();
      xmlhttp.overrideMimeType("text/xml"); 
    } catch (e) {
      xmlhttp = false;
    }
  }
  return xmlhttp;
}

var http = getHTTPObject(); //  create the HTTP Object
var isWorking = false;

服务器端搜索

当输入部分原子名称时，此脚本由 getlist() 函数调用。该字符串被转换为一个简单的正则表达式，并在 eXist 自由文本匹配函数中使用，以检索匹配的原子。响应取决于找到的匹配项数量

如果只有一个匹配项，则返回一个详细的表格
如果有多个匹配项，则返回一个匹配项列表
如果没有匹配项，则返回“没有匹配项”

一个函数将 ATOM 节点转换为一个表，将每个子节点映射到一个行，节点名称作为图例。

declare function local:atom-to-table($element ) {
   <table class="element">
      {for $node in $element/*
      let $label := replace(name($node),"_"," ") 
      return 
            <tr>
                 <th>{$label}</th> 
                 <td>
                   { $node/text()   }
                   </td>
             </tr>       
        }
    </table>
 };
  
let $name := request:get-parameter("name",())
return
  if ($name != "")
  then
      let $search := concat('^',$name)  (: anchor the term to the start of the string :)
      let $elements := doc("periodicTable.xml")/PERIODIC_TABLE
      let $matches := $elements/ATOM[matches(NAME,$search,"i")]
      return 
         if (count($matches) = 0)
         then 
            <span>No matches</span>
         else 
         if (count($matches) =1)
          then 
             local:atom-to-table($matches)
         else 
         (: multiple matches :)
             <table class="list">
               <tr>
                <th>Name</th>
                <th>Symbol</th>
                <th>Atomic Weight</th>
               </tr>
               {for $match in $matches
                order by $match/NAME
                return 
                 <tr>
                    <th>{string($match/NAME)}</th>
                    <td>{string($match/SYMBOL)}</td>
                    <td>{string($match/ATOMIC_WEIGHT)} </td>
                 </tr>
              }
            </table>
  else ()

待办事项

这里有一些命名问题 - 需要整理。需要包含单位