7.0

Table Of Contents

The Javascript file

This is the JavaScript code stored in the file "livesearch.js":

$(document).ready( function(){

getTree();

generateTree();

});

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() function. 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.

Customizing the store front - Adding a live search option