AJAXified search box

* What it does:
this is a small enhancement to the "show host" box in the nagios side menu 
which provides a simple autocomplete functionnality. Basicaly, once you've type
 a few character of hostname the ajax-script attempts to retrive possible 
 hostnames and provides you a drop down list with the hostnames. A running demo
  can be found at http://runnagios.be .

* How it works:
I'm using the following libraries to provide the AJAX support: 
 - scriptaculous (http://script.aculo.us/) for visual effects
 - prototype (http://prototype.conio.net/) wich is enclosedin scriptaculous
You need to add this libraries in your side.html headers. For example by 
adding the following 2 lines just after the TITLE tags of the page:
====================== snip here ======================
<script src="/javascripts/prototype.js" type="text/javascript"></script>
<script src="/javascripts/scriptaculous.js" type="text/javascript"></script>
====================== snip here ======================

I modified the the text search box to attach it a javascript function which 
handles autocompletion. This javascript function does 3 things:
- check if the user entered at least 2 characters, stops if not 
- call a script to query the possible hostnames (examples of script are below)
- display a "box" containing the results. The appearance of this box is handled
  by some CSS at the top of the side.html file

You need to do the following modifications to the side.html file:
- Add the necessary styles for the dropdown box:
====================== snip here ======================
div.auto_complete { width: 350px; background: #0E0E0E; font-family: verdana,arial,serif; color: #DEE7C6; font-size: 8pt; }
div.auto_complete ul { border:1px solid #888; margin:0; padding:0; width:100%; list-style-type:none; font-size: 8pt; }
div.auto_complete ul li { margin:0; padding:3px; font-size: 8pt; } 
div.auto_complete ul li.selected { background-color: #ffb; }
div.auto_complete ul strong.highlight { color: #800; margin:0; padding:0; }
====================== snip here ======================
This can be added just after the BODY.navbar style definition for example
- Add our new search box by:
replace the line
====================== snip here ======================
<input type='text' name='host' size='15' class="NavBarSearchItem">
====================== snip here ======================
with
====================== snip here ======================
<input autocomplete="off" type='text' id="host_name" name='host' size='15' class="NavBarSearchItem"/> 
<div class="auto_complete" id="host_name_auto_complete">
<ul><li>test</li></ul>
</div>
<script type="text/javascript">new Ajax.Autocompleter('host_name', 'host_name_auto_complete', '/hostname.py', {minChars: 2});</script>
====================== snip here ======================
In this example we are calling the script hostname.py to generate the result 
list (see below). 


*Sample search scripts:
The script your running can be in any language but needs (of course) to be 
callable by the client. The following examples are using php or python. Note 
that this script to not take into account the authenticated username ...
 you're therefore exposing your whole host list to the users.

=> php and shell using nagios object cache 
====================== snip here ======================
<?php
# looks for hostnames containing $_REQUEST['host'] string
# and return a formatted result
$host_name=escapeshellcmd($_REQUEST['host']);
$cmd="cat /usr/local/nagios/var/objects.cache | grep -A 1 'define host' | grep host_name | grep '".$host_name."' | sed 's/\s*host_name\s*//g'";
$rep=array();
if(strlen($host_name)>2) {
	exec($cmd,$rep);
}
echo"<ul>";
foreach($rep as $key => $possible_host) {
	echo "<li>$possible_host</li>";
}
echo"</ul>";
?>
====================== snip here ======================

=> python using ndo
====================== snip here ======================
import os, re, sys
try:
    from mod_python import apache
    from mod_python import Cookie
    from mod_python import util
except:
    print >> sys.stderr , "Running in CLI mode"

import time, MySQLdb
from Queue import Queue, Empty, Full

global cpool

# python connection handling
class ConnectionPool(Queue):

    def __init__(self, constructor, poolsize=5):
        Queue.__init__(self, poolsize)
        self.constructor = constructor

    def get(self, block=0):

        try:
            putstamp,obj = Queue.get(self, block)

            # don't return stale connection, this needs to match whatever your
            # connection keep alive value is in MySQL

            if time.time() - putstamp >= 28800:
                obj.close()
                return self.constructor()
            else:
                return obj

        except Empty:
            return self.constructor()

    def put(self, obj, block=0):

        try:
            Queue.put(self, (time.time(),obj), block)
        except Full:
            pass

class Connection:

    def __init__(self):
        self.connect()

    def connect(self):
        self.conn = MySQLdb.connect(host = "localhost",
                                    user = "nagiosuser",
                                    passwd = "mypassword",
                                    db = "ndo")
    def getConnection(self):
        return self.conn

    def cursor(self):
        return self.conn.cursor()

    def close(self):
        self.conn.close()

# mod_python request handler
def index(req,host=""):
    cpool = ConnectionPool(Connection, 5)
    req.content_type = 'text/html'
    response="<ul>"
    if host and len(host)>2:
        mysql = cpool.get()
        mysql_conn = mysql.getConnection()
        mysql_conn.query("select name1 from ndo_objects where objecttype_id=1 and name1 like \'%"+host+"%\' order by name1 asc limit 0,5")
        res = mysql_conn.store_result()
        for row in res.fetch_row(5):
            response += "<li>"+row[0]+"</li>"
        cpool.put(mysql)
    response+="</ul>"
    req.write(response)
====================== snip here ======================


* diff file ?
====================== snip here ======================
7c7,8
<
---
> <script src="/javascripts/prototype.js" type="text/javascript"></script>
> <script src="/javascripts/scriptaculous.js" type="text/javascript"></script>
9d9
<
18a19,47
> div.auto_complete {
>             width: 350px;
>             background: #0E0E0E;
>             font-family: verdana,arial,serif;
>             color: #DEE7C6;
>             font-size: 8pt;
>           }
> div.auto_complete ul {
>             border:1px solid #888;
>             margin:0;
>             padding:0;
>             width:100%;
>             list-style-type:none;
>             font-size: 8pt;
>           }
> div.auto_complete ul li {
>             margin:0;
>             padding:3px;
>             font-size: 8pt;
>           }
> div.auto_complete ul li.selected {
>             background-color: #ffb;
>           }
> div.auto_complete ul strong.highlight {
>             color: #800;
>             margin:0;
>             padding:0;
>           }
>
20d48
<
22d49
<
167c194
<       <input type='text' name='host' size='15' class="NavBarSearchItem">
---
>       <input autocomplete="off" type='text' id="host_name" name='host' size='15' class="NavBarSearchItem"/>
168a196,198
>       <div class="auto_complete" id="host_name_auto_complete"><ul><li>test</li></ul></div>
>       <script type="text/javascript">new Ajax.Autocompleter('host_name', 'host_name_auto_complete', '/hostname.py', {minChars: 2});
>       </script>
267c297,302
<
====================== snip here ======================