How to search a keyword in XML and scroll down the window to it?

Question

Thanks to Bishiboosh and fmsf. As suggested, we're going to do it through XSL which looks more obvious answer of the problem (for detail please read below question).

We'd have to create an XSL which will search a keyword and match with node name/value, attribute name/value etc. everything in 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"&gt;
  <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>

I am having a problem in completion of XSL. We'd like to have some help to get it done.

Thanks.

Hi,

I've to add a feature in a web-based help system of a product. The look and feel and features are almost same like we can see in desktop softwares help which popup on pressing F1.

The feature which I have to add up is a search feature where user input a text, an Ajax will be called and the request will direct to the server, where it will make up the response as an XML which will contain the list of XML Schemas. This has been done! Except.

Let me first scratch application UI. So, you would have a better idea when we will be discussing this with technical details.

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

How it works? The searched result will be shown as hyperlink (as shown above RESULT LINK 1...3). When user click one of the these links a schema will be loaded in Frame B and the browser scroll to the searched keyword.

One more important thing to mention in case you need to know, XML Schema will be directly referred in the Frame B. i.e

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

First, lets assume almost all initial work have been done like search, process, makeup result links and clicking on them we are getting the right schema in the right frame (Frame B).

The problem is when XML schema load into the right frame it should also scroll and highlight the first searched keyword.

I don't think highlight would be possible there as the document is in XML format and as I told Frame B has a direct reference of XML file. But, search and scroll has a fair probability? Yes? No?

Do you know how could I scroll to searched keyword in an XML file?

Thanks.

P.S: If you have any query please comment.

Answer 1

AFAIK you won't be able to do this. You will have to identify a point in your document where you can scroll to. But in your case you are using an XML file as the source of an iframe. XML is just for storing data and does not contain any positioning attributes.

Answer 2

You should not load directly the XML in the B frame. XML displaying is very different depending on the browser, for example in Chrome it would only display the text content.

There are different possible ways to display a XML in a pretty fashion :

• simplest one : display the XML as text, and prettify it. You put your code in tags and use google-code-prettify for example to have pretty-print.
• a bit more complicated, but a lot easier to do what you want : use XSLT. The concept is simple : you define a XSL page, which will tell how you transform your xml page to a html one. I don't know how to do it client-side, but there is plenty of tutorials on Internet, and the use of xsl could be another SO question.

To scroll, you can use window.scrollTo

Answer 3

As already mentioned by pulse and Bishiboosh, this would not be possible and the way XML is presented varies greatly from browser to browser.

For instance, a sample XML from w3schools shows up like this on Safari:

This one is on Chrome:

And finally Firefox:

You'll be much better off if you display the XML yourself.

Answer 4

Try using XSL to turn XML into something viewable.

Ansewer to comment requesting more info:

XSL transforms XML into HTML. After that for the scrolling part you can use javascript to scroll to the place you want to.

Answer 5

You can use xmlverbatim to transform your XML into HTML with indentation, syntax coloring etc.