7.1

});
function getTree(){
var searchfor = $('#searchfor').val();
$('#searchfor').css({backgroundPosition: '100% -18px'})
$.ajax({
type: "GET",
url: "templates/default/storefront_tree_livesearch/livesearch.php",
data: "searchfor=" + searchfor,
success: function(msg){
$('#searchfor').css({backgroundPosition: '100% 2px'})
$("#tree").html(msg);
generateTree();
}
});
}
function generateTree(){
$("#tree ul").treeview({
collapsed: true
});
}
$(document).ready
This code is executed when the browser is finished loading the web page. It executes the getTree() and generateTree() func-
tion. This section makes sure that the full list is retrieved when the store front page is invoked (New Document).
getTree()
This function executes every time a character is entered in the input field. It retrieves the text from the search field and sends
the contents to the livesearch.php file on the server. The HTML code returned by the livesearch.php file is used to update a
placeholder element on the page (<div id="tree">).
generateTree()
Once the tree information is loaded in to the DOM the generateTree() function is called to apply the final tree view and tree
functionality.
The template file
In the content area of the template file (template-storefront_overview.php) an input field is added. The getTree() function is
added to the onkeyup event of the <input> field. This event is triggered when the user presses, and releases a key in the
input field.
<div id="content">
<div style="border:1px solid silver;width:250px;margin-bottom:0.5em;">
<div id="cSearchHeader">Search</div>
<div style="padding: 4px;">
<p><b>Pub type or document name:</b></p>
<input style="
©2010 Objectif Lune Inc - 261 -