Pesquisar XML com JavaScript e exibir resultados na tabela

Question

Jun 10, 2013, 05:04 AM

Pesquisar XML com JavaScript e exibir resultados na tabela

Para o meu curso, fui solicitado a criar uma página html que tem a funcionalidade de permitir que um usuário insira o primeiro nome de um contato, que submeta, carregue um arquivo xml que eu criei anteriormente, percorra os contatos até coincidir com o primeiro. nome digitado pelo usuário e exibe as informações de contato, exceto o endereço de e-mail, na mesma página, em uma tabela com títulos e<h1> exibindo Os detalhes de contato são: Se não houver correspondência, deve haver um<h2> que diz que o contato não existe.

O seguinte é meu arquivo XML:

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="Contact.xsl" ?>
<!DOCTYPE contact SYSTEM "contact.dtd">
<contact>
    <person>
        <name>
            <firstname>Bob</firstname>
            <lastname>Jones</lastname>
        </name>
        <phone>(02)44 42 45 63</phone>
        <address>
            <street>34 Highway Road</street>
            <city>Grovedale</city>
            <state>NSW</state>
            <postcode>3228</postcode>
            <email>[email protected]</email>
        </address>
    </person>
    <person>
        <name>
            <firstname>Gary</firstname>
            <lastname>Williams</lastname>
        </name>
        <phone>(02)44 41 87 56</phone>
        <address>
            <street>223 Yarra Avenue</street>
            <city>Branston</city>
            <state>NSW</state>
            <postcode>2317</postcode>
            <email>[email protected]</email>
        </address>
    </person>

Eu tentei algumas coisas, mas não tenho idéia de como obter os dados para exibir em uma tabela. O seguinte é o meu arquivo XSL, que é como eu suponho que eles querem que a tabela seja mostrada, mas com os resultados da pesquisa.

<?xml version="1.0" encoding="ISO-8859-1"?><!-- DWXMLSource="Contact.xml" -->
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<head>
<style>
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}
div {
    margin-left: 150px;
    margin-right: 20px;
    margin-top: 50px;
    width: 80%;
}
h1 {
    font-size: 24px;
    color: #F00;
}
.headings {
    background-color: #06F;
}
.data {
    background-color: #6F9;
}
.table {
    border: 2px solid #F00;
    width: 100%;
}
</style>
</head>
<body>
<div>
<h1>CONTACTS</h1>
    <table class="table">
        <tr class="headings">
            <th>First Name</th>
            <th>Last Name</th>
            <th>Street</th>
            <th>City</th>
            <th>State</th>
            <th>Postcode</th>
            <th>Email</th>
        </tr>
        <xsl:for-each select="contact/person">
        <tr class="data">
            <td><xsl:value-of select="name/firstname"/></td>
            <td><xsl:value-of select="name/lastname"/></td>
            <td><xsl:value-of select="address/street"/></td>
            <td><xsl:value-of select="address/city"/></td>
            <td><xsl:value-of select="address/state"/></td>
            <td><xsl:value-of select="address/postcode"/></td>
            <td><xsl:value-of select="address/email"/></td>
        </tr>
    </xsl:for-each>
</table>
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

Eu tenho que usar JavaScript para pesquisar o arquivo XML e criar uma tabela exibindo os resultados da pesquisa.

O HTML que tenho é o seguinte:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Task 2</title>
<script language="JavaScript" type="text/javascript">
window.onload = loadIndex;
function loadIndex()
{
    if (document.implementation && document.implementation.createDocument)
    {
        xmlDoc = document.implementation.createDocument("", "", null);
        xmlDoc.load("Contact.xml");
    }
    else if (window.ActiveXObject)
    {
        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async = "false";
        xmlDoc.load("Contact.xml");
    }
}
function searchIndex()
{
    if (!xmlDoc)
    {
        loadIndex();
    }
    var searchterm = document.getElementById("searchme").value;
    var allitems = xmlDoc.getElementsByTagName("firstname");
    results = new Array;
    for (var i=0;i<allitems.length;i++)
    {
        var name = allitems[i].lastChild.nodeValue;
        var exp = new RegExp(searchterm,"i");
        if ( name.match(exp) != null)
        {
            results.push(allitems[i]);
        }
    }
    showResults(results, searchterm);
}
function showResults(results, searchterm)
{
    //insert table data here to be displayed
}
</script>
</head>
<body>
First Name: <input type="text" name="firstname" id="searchme">
<br />
<input type="submit" value="Search" onClick="searchIndex(); return false;">
</body>
</html>

Como você pode ver, não tenho ideia de por onde começar. Eu sei que eu iria carregar o arquivo XML, em seguida, reunir a tag primeiro nome, então de alguma forma comparar os dois, em seguida, exibir os resultados.

Eu vi o seguinte, e isso é semelhante ao que eu sou depois, mas eu não consigo obter os resultados para exibir em uma tabela.http://www.dzone.com/snippets/simple-javascriptxml-based

Obrigado pela ajuda.