Employee Search Box

Type a name or parts of a name (e.g. ma) inside the box provide then select an record from the results.


PHP/HTML Source:
<?php

require_once 'raxan/pdi/autostart.php';

// system configuration
Raxan::loadConfig('config.php'); // load external config file
Raxan::config('site.timezone','America/Toronto'); // set timezone

class SearchBoxPage extends RaxanWebPage {

    protected $db;
    protected $infoTpl, $searchTpl;

    protected function _init() {
        $this->source('views/searchbox.html');
        try {
            // see config.php for connection info
            // For employee sample data visit http://dev.mysql.com/doc/
            $this->db = $this->Raxan->connect('employees'); // connect to db
        }
        catch (Exception $e) {
            $this->db = null;
            $msg = $this->getView('connection-failed.html');
            $this->flashmsg($msg,'bounce','rax-box error');
        }
    }

    protected function _load() {
        // event to handle employee click
        $this->results->delegate('a','#click','.employeeClick');

        // event to handle auto-complete search
        $this->empName->bind('#keydown',array(
            'callback' => '.searchEmployee',
            'delay' => 600,
            'autoToggle' => 'img#pre',
            'serialize' => '#empName',
            'inputCache' => true   
        ));                    

        // get templates from document
        $this->searchTpl = $this['#results']->html();

        if (!$this->isPostBack) {
            $this->info->html('');
            $this->results->html('');
        }
    }


    // -- Event handlers

    protected function employeeClick($e) {
        $id = $e->intVal();
        $ds = $this->getEmployeeInfo($id);
        $this->info->bind($ds,array(
            'format'=>array(
                'gender'=>'capitalize',
                'hire_date'=>'date: M d, Y',
                'birth_date'=>'date: M d, Y'
            )
        ));
        $this->info->updateClient();
        $this->info->client->hide()->fadeIn();
    }

    protected function searchEmployee($e) {
        $rows = null;
        $name = $this->post->textVal('empName');
        if (!$name) $this->results->html(''); // clear results
        else {
            $name = explode(' ',trim($name),2);
            $fname = $name[0];
            $lname = isset($name[1]) ? trim($name[1]) : '';
            $rows = $this->getEmployees($fname.'%', $lname.'%');
            $this->results->bind($rows);
            $msg = ($rows ? 'Top 10 results for ': 'No results found for ').$fname.' '.$lname;;
            $this->results->prepend("<div class=\"bmb bmm\">$msg</div>");
        }
        $this->results->updateClient();
        if (!$rows) $this->info->html('')->updateClient(); // clear info panel
    }

    protected function getEmployees($fname,$lname) {
        if (!$this->db) return array();
        $filter = 'first_name like ? '.(($fname && $lname) ? ' and ' : ' or ').
                  'last_name like ? limit 10';
        $rows = $this->db->table('employees emp_no,first_name,last_name',$filter,$fname,$lname);
        return $rows;
    }

    protected function getEmployeeInfo($id) {
        if (!$this->db) return array();
        $sql = "select *,
                case gender when 'm' then 'male' when 'f' then 'female' else 'male' end as icon,
                case gender when 'm' then 'male' when 'f' then 'female' else 'male' end as gender
                from employees where emp_no=? ";
        $rows = $this->db->execQuery($sql,$id);
        return $rows;
    }

}

?>

Plugin Source:

HTML/JavaScript Source (views/searchbox.html):
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Employee Search Box</title>
    <link href="../raxan/ui/css/master.css" rel="stylesheet" type="text/css" />
    <!--[if lt IE 8]><link rel="stylesheet" href="../raxan/ui/css/master.ie.css" type="text/css"><![endif]-->
    <link href="../raxan/ui/css/default/theme.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        #pre { position:absolute; margin:25px 0 0 195px; }
        #info label {display:block; float:left}
        #name {padding-right:10px;}
        #results {
            color:#444;
            background-color:#fff;
            padding:5px;
            height: 220px;
        }
        #results a {color:#444;}
        .icon {vertical-align:middle; }

        #searchbar { border: solid 1px #ddd; }
        #searchbar .rax-background-pal {
            background-color: #009db5;
        }

        #contentbar {
            margin-left:-8px;
        }
    </style>

</head>

<body>
    <div class="container c32 prepend-top">

        <!-- panel -->
        <div id="searchbar" class="rax-backdrop c12 left front">
            <div class="rax-background-pal rax-glass round">
                <form id="webform" class="pad r16" method="post">
                    <h2 class="bottom">Employee Lookup</h2>
                    <div class="ctrl-group ">
                        <img class="above hide" id="pre" src="views/images/preloader.gif" width="15" height="15" alt="loading"/>
                        <label class="bold">Enter employee name</label><br />
                        <input class="e100 textbox" type="text" id="empName" name="empName" value="" autocomplete="off"  />
                    </div>
                    <div id="results" class="round">
                        <img class="icon" src="views/images/user_gray.png" height="16" width="16">
                        <a href="#{emp_no}">{first_name} {last_name}</a><br />
                    </div>
                </form>
            </div>
        </div>

        <!-- panel -->
        <div id="contentbar" class="rax-backdrop left prepend-top c18 r14">
            <div class="rax-content-pal rax-metalic h100 round clip">
                <div class="flashmsg"></div>
                <div id="info" class="prepend1 prepend-top">
                    <img class="column" src="views/images/{icon}.png" alt="Photo" width="64" height="64" />
                    <div class="column">
                        <label class="c3">Name</label>: {first_name} {last_name}<br />
                        <label class="c3">Hire Date</label>: {hire_date}<br />
                        <label class="c3">Gender</label>: {gender}<br />
                        <label class="c3">Birth Date</label>: {birth_date}<br />
                    </div>
                </div>
            </div>
        </div>

    </div>
</body>

</html>

Data Source: