DROP TABLE IF EXISTS `test`.`countries`;
CREATE TABLE  `test`.`countries` (
  `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT,
  `name` varchar(45) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=latin1;

<script type="text/javascript">
/* This function should be called by links that open the ShowModal dialog. 
 * It sets a new href for the UpdatePanel according of clicked link 
 * and loads the data to the corresponding Record.
 */
function RelocatePanel2() {
    /* Panel2 is an UpdatePanel that contains a Record.
     * Also, Panel2 has a ShowModal feture.
     * Here, the location of the Panel2 is changed to have a new href 
     * with the id for Record.
     */
    $("Panel2").location = this.href;
 
    /* To load a new data to the Record according with the href that 
     * is set above, Panel2 should be reloaded. 
     */
    AjaxPanel.reload($("Panel2"));
}
</script>

<style type="text/css">
/* This style makes Show Modal dialog wider. */
body .ModalShowDiv {
    width: 350px;
}
</style>

<script type="text/javascript">
    /* RelocatePanel2() is added to the click event chain so it will be called
     * by all the record links in Grid. 
     * RelocatePanel2() sets a new href for the Record Update Panel and 
     * reloads the Record Update Panel.
     */
    addEventHandler("Panel1countriesname", "click", RelocatePanel2);
    /* Call RelocatePanel2() when a new link is clicked, too. */
    addEventHandler("Panel1countriesNew", "click", RelocatePanel2);
 
    /* RelocatePanel2() and Panel2ShowModal1_show() are in the 
     * click event chain so they are called one after another. 
     */
</script>

<script type="text/javascript">
    /* Reload the Grid Update Panel when some actions with Record are made. */
    AjaxPanel.reload($("Panel1"));
</script>

alert({}==null); // false
alert({}=={}); // false
alert({}=={}); // false
alert({}==0); // false
alert({}==""); // false
alert({}==[]); // false
// etc :)

function empty(o) {
    for(var i in o) 
        if(o.hasOwnProperty(i))
            return false;
 
    return true;
}

var o = {};
alert($.toJSON(o)=='{}'); // true
 
var o = {a:1};
alert($.toJSON(o)=='{}'); // false

<!--CSS file (default YUI Sam Skin) -->
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.8.0r4/build/autocomplete/assets/skins/sam/autocomplete.css">
 
<!-- Dependencies -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/datasource/datasource-min.js"></script>
 
<!-- Source file -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/autocomplete/autocomplete-min.js"></script>

<!-- 
Let's use SPAN becase it has "display: inline" by default.
IE6/7 can apply "display: inline-block" only for elements
that have "display: inline" by default.
Read more: http://www.quirksmode.org/css/display.html.
-->
<label for="input">YUI AutoComplete</label>
<span id="autocomplete">
    <input id="input" type="text">
    <div id="results"></div>
</span>
 
<script type="text/javascript">
/* creating a data source out of js array */
var ds = new YAHOO.util.LocalDataSource(["apples", "apricots", "bananas"]);
 
/* creating a yui autocomplete */
var ac = new YAHOO.widget.AutoComplete("input", "results", ds);
</script>

/* outer container */
#autocomplete {
    /* behaving like an inline element */
    display: -moz-inline-box; /* for FF less then 3.0 */
    display: inline-block !important;
 
    position: relative;
    /* standard width of a textbox */
    width: 145px;
 
    /* align vertically on the center */
    vertical-align: middle; 
}
 
/* input */
#autocomplete input {
    /* preventing an outer container DIV collapsing */ 
    position: relative;
    /* tweaking to traditional box model
     * width = border + padding + content
     */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box; /* ie8 */
 
    /* CSS Expression to calculate width for the input.
     * 2px border + 1px padding + 1px padding + 2px border = 6px.
     * Only for IE6/7 because traditional box model cannot
     * be tweaked by any css property.
     * currentStyle object - IE css styles as specified by 
     * global style sheets, inline styles, and HTML attributes.
     */
    *width: expression(parseInt(this.parentNode.currentStyle.width)-6+'px');
}