Adding a live search option

This example demonstrates a live search, where you get search results while you type. An event is triggered when the user presses, and releases a key in the input field. When the event is triggered, a Javacscript function is executed. The result of this function is used to update a placeholder element on the web page. The function performs an AJAX request to retrieve the document list from the database. AJAX (Asynchronous JavaScript and XML) is a method of building interactive applications for the Web that process user requests immediately.

To install the sample copy the template-storefront_overview.php from the storefront_tree_livesearch folder to the root of the default skin.

The tree view with a search block.

This sample constists of the following parts:

Store front specific template file (exception file). The template file contains links to external JavaScript files and some custom HTML code for the search and tree areas.
An php file that retrieves the document list. The result set is used to generate the HTML for the tree. This file is called by a custom Javascript function in the <head> section of the template file. This functions calls this php file using an AJAX request.

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.

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="
        background-image:url('<? generateSkinLocation(); ?>/
        storefront_tree_search/images_tree/throbber.gif');
        background-repeat:no-repeat;background-position:100% 2px;
        width:220px;margin-top:0.5em;" id="searchfor" onkeyup="getTree(this.value)"/>
    </div>
  </div>               
  <div id="tree"></div>                  
</div>

Livesearch.php

The PHP page called by the JavaScript code is called "livesearch.php". The code retrieves the publication types and templates on the server based by the search string entered by the visitor.

The getTree() accepts a search string parameter (getTree('cards')). The getTree() function returns a list of publication types and documents where the case sensitive search string appears at least in one of the fields:

Document name
Document code
Publication type name
Publication type code

The search result is used to create an hierchical tree using unorderedlists (<ul>). The response is used by the getList() function