clicking search resuts exapnds tree node

plork123 · #1 (**permalink**) 10-08-04, 10:32

Hi,

I have this page of code, when you click the search button the results are shown in a div. what I am trying to do is, when a user clicks the search result(s) there may be more than one result the tree on the right will expand to match what they have clicked

I've put some dummy data in the page.

Click the search button the results "node 1 -> node 1.1 -> stuff 1.2" is displayed. What i'm trying to do is when this result is clicked the tree exapnds to the last part of the node. so the tree will look like this :

node 1
stuff 1
stuff 2
node 1.1
stuff 1.2
stuff 4
stuff 5
stuff 6
node 2

Can sanyone help me achive this

Thanks in advance

<html>
<head>

<script language="javascript">

function doSearch(searchCriteria)
{
var outputFrame = top.searchResults;
var outputStr = "";

var tableWidth = 4;
var lineIdx = 0;
var outputStr = "";

var count = 0;

outputStr += '<table style="font-family:Verdana; font-size:10pt; color:black;" cellpadding="0" border="0">';
outputStr += '<tr><td>Search results:</td></tr>';
outputStr += '</table>';

count = count + 1;

outputStr += '<table style="font-family:Verdana; font-size:8pt; color:black;" cellpadding="0" border="0">';
outputStr += '<tr>';
outputStr += '<td>1. </td>';
outputStr += '<td><a href="#" onclick="openTreeNode();">node 1 -> node 1.1 -> stuff 1.2</a></td>';
outputStr += '</tr>';
outputStr += '</table>';

searchResults.innerHTML = outputStr

}

function keyupEvent()
{
if (window.event.keyCode==13)
{
doSearch(document.taxonomySearch.search.value);
}
}

function myTree()
{

/*
node 1
stuff 1
stuff 2
node 1.1
stuff 1.2
stuff 4
stuff 5
stuff 6
node 2
node 2.1
stuff 2.1.2
stuff 2.1.3
stuff 2.1.4
node 2.2
stuff 2.2.3
stuff 2.2.4
stuff 2.2.5
*/
}

var imgOpen = "/TreeExample1/images/textfolder.gif";
var imgClosed = "/TreeExample1/images/folder.gif";
var imgPage = "/TreeExample1/images/text.gif";
var indent = 16;

Function.prototype.build = function()
{
var aeName = this.toString().match(/function (\w*)/)[1];

//var menuItems=this.toString().match(/\/\*([^(\*\\)]*)\*\//)[1].replace(/\r/g,'').split("\n");
var menuItems = this.toString().match(/\/\*([^\*]*)\*\//)[1].replace(/\r/g,'').split("\n");

var output = '<div>';

for (var i=menuItems.length-1; i>-1; i--)
{
window.status=i;

if (menuItems[i]=='') continue;

var level = menuItems[i].split("\t").length-1;

var newNode = '<table style="font-family:Verdana; font-size=10pt;" id="ae'+aeName+'_'+i+'" cellpadding=0 cellspacing=0 border=0 style="position:relative;left:'+(indent*level)+'px ;'

if (level>2) newNode += 'display:none';

newNode += '"><tr><td valign=top>';

if (menuItems[i+1] && menuItems[i+1].split("\t").length-1>level)
{
newNode += '<a href="javascript:aeToggle(\''+aeName+'\','+i+','+l evel+')"><img id="img'+aeName+'_'+i+'" src="'+imgClosed+'" border=0></a>&nbsp';
}
else
{
newNode += '<img src="'+imgPage+'" border=0>';
}

newNode += '</td><td valign=top>'+menuItems[i]+'</td></tr></table>';

output = newNode + output;
}

document.write(output+'</div>');
//document.write("<textarea style='width:100%;height:400px;' id=textarea1 name=textarea1>"+output+"</textarea>");
}

function aeToggle(treeName,i,level)
{
var el = document.getElementById;

if (el('img'+treeName+'_'+i)) el('img'+treeName+'_'+i).src = el('img'+treeName+'_'+i).src.indexOf(imgOpen)>-1?imgClosed:imgOpen;

while (1==1)
{
i++;

window.status=i;

var div = el('ae'+treeName+'_'+i);

if (!div) break;

var childLevel = parseInt(div.style.left)/indent;

if (childLevel==level+1) div.style.display = div.style.display=='none'?'':'none';

if (childLevel<=level) break;
}
}

function openTreeNode()
{
}

</script>
</head>

<body link="#000000" alink="#000000" vlink="#000000">
<form name="form" action="">

<table border="0">
<tr>
<td><input name="search" id="search" onkeyup="javascript:keyupEvent();" size="54"></td>
</tr>
</table>

<table border="0">
<tr>
<td><input type="button" value="Search" name="btnSearch" onclick="doSearch(document.form.search.value)"></td>
<td><input type="button" value="Clear" name="btnClear" onclick=document.form.search.value=""></td>
</tr>
</table>

<div style="font-family:Verdana; font-size=10pt; position:absolute; top:20; left:400; padding:1px;">
tree
</div>

<div id="tree" style="font-family:Verdana; font-size=8pt; border-style:solid; border-width:1px; position:absolute; width:500px; height:400px; top:40; left:400; padding:1px;">
<script>myTree.build()</script>
</div>
</form>

<div id="searchResults"></div>

</body>
</html>