如何在 XML 中搜索关键字并将窗口向下滚动到它？答案

【问题标题】：How to search a keyword in XML and scroll down the window to it?如何在 XML 中搜索关键字并将窗口向下滚动到它？
【发布时间】：2011-01-02 01:08:24
【问题描述】：

感谢 Bishiboosh 和 fmsf。作为建议，我们要做通过看起来更明显的XSL 问题的答案（详细请阅读以下问题）。

我们必须创建一个 XSL，它将搜索关键字并与节点匹配名称/值、属性名称/值等。一切都在 XML 中。

XML

<?xml version="1.0"?>
<CustomerList>
  <Customer>
    <CustomerID>1111</CustomerID>
    <CompanyName>Sean Chai</CompanyName>
    <City>New York</City>
    <NewCustomer>N</NewCustomer>
    </Customer>
  <Customer>
    <CustomerID>1112</CustomerID>
    <CompanyName>Tom Johnston</CompanyName>
    <City>Los Angeles</City>
    <NewCustomer>N</NewCustomer>
  </Customer>
  <Customer>
    <CustomerID>1113</CustomerID>
    <CompanyName>Institute of Art</CompanyName>
    <City>Chicago</City>
    <NewCustomer>Y</NewCustomer>
  </Customer>
</CustomerList>

XSL

<xsl:stylesheet version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:template match="@* | node()">
    <xsl:copy>
      <xsl:choose>
        <!-- 
        // We'll match the node/attribute name/values
        // with search text. If it is match to node 
        // name/value we have to put a div/b tag around
        // it or it is match to attribute then the div/b
        // tag will be around it's node.
        -->
        <xsl:when test="">
          <xsl:value-of select="" />
        </xsl:when>
        <xsl:otherwise>
          <xsl:apply-templates select="@* | node()"/>
        </xsl:otherwise>
      </xsl:choose>
    </xsl:copy>
  </xsl:template>
</xsl:stylesheet>

我在完成时遇到问题 XSL。我们希望得到一些帮助搞定。

谢谢。

嗨，

我必须在产品的基于 Web 的帮助系统中添加一项功能。外观和功能与我们在桌面软件帮助中看到的几乎相同，按 F1 会弹出。

我必须添加的功能是一个搜索功能，用户输入一个文本，一个 Ajax 将被调用，请求将定向到服务器，在那里它将响应作为一个包含列表的 XML XML 模式。这已经完成了！除了。

让我先来看看应用程序 UI。所以，当我们讨论这个技术细节时，你会有一个更好的主意。

            _________________________________________________ 
            | Search           |
            |__________________|    XML SCHEMA OPEN HERE ...
(1) FRAME A | Type here...     |       (2) FRAME B
            |__________________|
            |                  |
            | . RESULT LINK 1  |
            | . RESULT LINK 2  |
            | . RESULT LINK 3  |
            |                  |
            |                  |
            |                  |
            |                  |
            |                  |

它是如何工作的？搜索结果将显示为超链接（如上图 RESULT LINK 1...3）。当用户单击这些链接之一时，架构将加载到框架 B 中，并且浏览器滚动到搜索的关键字。

如果您需要了解，还有一件更重要的事情，XML Schema 将直接在 Frame B 中引用。即

$(iframe).src = "XMLSchema.xml"

首先，让我们假设几乎所有初始工作都已完成，例如搜索、处理、构成结果链接并单击它们，我们在正确的框架（框架 B）中获得了正确的架构。

问题是当 XML 模式加载到正确的框架中时，它还应该滚动并突出显示第一个搜索到的关键字。

我不认为高亮在那里是可能的，因为文档是 XML 格式，而且我告诉 Frame B 有 XML 文件的直接引用。但是，搜索和滚动有一个公平的概率吗？是的？没有？

您知道如何滚动到 XML 文件中的搜索关键字吗？

谢谢。

PS：如果您有任何疑问，请发表评论。

【问题讨论】：

标签： javascript xml xslt

【解决方案1】：

您可以使用xmlverbatim 将您的 XML 转换为带有缩进、语法着色等的 HTML。

【讨论】：

谢谢。我肯定会调查的。

【解决方案2】：

尝试使用 XSL 将 XML 转换为可查看的内容。

回复请求更多信息的评论：

XSL 将 XML 转换为 HTML。在滚动部分之后，您可以使用javascript滚动到您想要的位置。

【讨论】：

我们如何通过 XSL 做到这一点？你能解释一下吗？
谢谢。您是否有通过 XSL 与 XML 节点和属性名称/值匹配的漂亮代码？我已经更新了我展示了一个示例 XSL 的问题，但是我在给它一个条件然后在查找项周围增加粗体标记时遇到了问题。

【解决方案3】：

您不应该直接在 B 框架中加载 XML。 XML 显示因浏览器而异，例如在 Chrome 中它只会显示文本内容。

以漂亮的方式显示 XML 有多种可能的方式：

最简单的一种：将 XML 显示为文本，并美化它。您将代码放在标签中并使用google-code-prettify 来进行漂亮的打印。
有点复杂，但更容易做你想做的事：使用XSLT。这个概念很简单：您定义一个 XSL 页面，它将告诉您如何将您的 xml 页面转换为 html 页面。我不知道怎么做客户端，但是网上有很多教程，xsl的使用可能是另一个SO问题。

要滚动，您可以使用window.scrollTo

【讨论】：

谢谢。我也觉得我必须把它放到一个盒子里，而不是直接引用它。
我们如何通过 XSL 做到这一点？

【解决方案4】：

正如 pulse 和 Bishboosh 已经提到的，这是不可能的，并且 XML 的呈现方式因浏览器而异。

例如，来自 w3schools 的示例 XML 在 Safari 上显示如下： alt text http://img63.imageshack.us/img63/830/picture1hw.png

这个在 Chrome 上： alt text http://img9.imageshack.us/img9/9057/picture2kr.png

最后是 Firefox： alt text http://img109.imageshack.us/img109/8941/picture3hm.png

如果你自己显示 XML，你会好很多。

【讨论】：

【解决方案5】：

AFAIK 你将无法做到这一点。您必须在文档中确定一个可以滚动到的点。但是在您的情况下，您使用 XML 文件作为 iframe 的源。 XML 仅用于存储数据，不包含任何定位属性。

【讨论】：