So here is a really basic version of what I was thinking. Hopefully it will be of some use.
http://www.exfer.net/test/searchxml.xml
As you can see in the code, javascript is doing all the searching work with DHTML used to display it without hitting the server again. If you wanted to check a search query from the previous post you'd have to look at the window.location.search and parse that for the query. This way works nice as long as there aren't tons of results. But XSL wouldn't be any better since it also only runs on the client. If you want to limit the searches actually sent to the client you'd have to do that in the backend.
searchxml.xml
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet href="searchxml.xsl" type="text/xsl" ?>
<jobs>
<job>
<name>Shoe Sales</name>
<desc>Selling shoes</desc>
<coast>East</coast>
</job>
<job>
<name>Food Taster</name>
<desc>Taste food</desc>
<coast>East</coast>
</job>
<job>
<name>Computer Programmer</name>
<desc>Program computers</desc>
<coast>West</coast>
</job>
<job>
<name>Teacher</name>
<desc>Teach students</desc>
<coast>East</coast>
</job>
<job>
<name>Kite Flyer</name>
<desc>Fly kites</desc>
<coast>West</coast>
</job>
</jobs>
searchxml.xsl
<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" omit-xml-declaration="yes" indent="yes" />
<xsl:template match="/">
<xsl:apply-templates />
</xsl:template>
<xsl:template match="jobs">
<html>
<head>
<title>Search Jobs</title>
<script type="text/javascript">
//<![CDATA[
function doSearch() {
var rb = document.getElementsByName("whichCoast");
var v;
for (var i = 0; i < rb.length; i++) {
if (rb[i].checked) {
v = rb[i].value;
break;
}
}
var jobs = document.getElementsByTagName("li");
for (var j = 0; j < jobs.length; j++) {
if (jobs[j].className == "job") {
var li = jobs[j].getElementsByTagName("li");
for (var k = 0; k < li.length; k++) {
if (li[k].className == "coast") {
if (v == "Either" || li[k].firstChild.nodeValue.match(v)) {
jobs[j].style.display = "";
} else {
jobs[j].style.display = "none";
}
}
}
}
}
}
//]]>
</script>
</head>
<body>
<form action="#" onsubmit="return(false);">
<label>East <input type="radio" name="whichCoast" value="East" onclick="doSearch();"/></label>
<label>West <input type="radio" name="whichCoast" value="West" onclick="doSearch();"/></label>
<label>Either <input type="radio" name="whichCoast" value="Either" onclick="doSearch();" checked="checked"/></label>
</form>
<ul>
<xsl:for-each select="job">
<li class="job">
<ul>
<li class="name"><xsl:value-of select="name"/></li>
<li class="desc"><xsl:value-of select="desc"/></li>
<li class="coast"><xsl:value-of select="coast"/></li>
</ul>
</li>
</xsl:for-each>
</ul>
</body>
</html>
</xsl:template>
</xsl:stylesheet>