Question

How does the stack overflow search input at the top works? It seems to expand random or when it’s empty and backspace is hit.

1. What is the jQuery, html and css behind it?
2. Does it replace or expand over the links?
3. Is there an other additional functionality I’ve missed?

Answer 1

How you can retrive the jQuery code of the search textbox?

This is the <input>:

<input autocomplete="off" name="q" class="textbox" placeholder="search" tabindex="1" type="text" maxlength="140" size="28" value="">

With little jQuery code (and knowing what you’re doing), you can pull the event handlers:

$('.textbox[name="q"]').data('events')//Here jQuery saves internally the handlers

In that object you can see they have two handlers, one for keydown and one for focusout.

It’s minified, but you can understand it if you wish:

keydown:

function (c){if(k||46>c.keyCode&&8!=c.keyCode&&32!=c.keyCode)return!0;k=!0;clearTimeout(e);d.clearQueue("expand");h(function(c){d[0].placeholder="";a.fadeOut(100,c)});h(function(c){d.animate({width:f,"max-width":f},100,c)});h(function(){0==d.parent().find(".search-prompt").length&&d.before('<span class="search-prompt">search:</span>')});3==d.queue("expand").length&&d.dequeue("expand")}

focusout:

function (){e=setTimeout(function(){h(function(c){d.parent().find(".search-prompt").remove(); c()});h(function(a){d.animate({width:c,"max-width":c},100,a)});h(function(c){n&&""==d[0].value&&(d[0].value="search");d[0].placeholder="search";a.fadeIn(100,c)});3==d.queue("expand").length&&d.dequeue("expand");k=!1},200)}

---

Indented version:

keydown:

function(c) {
    if (k || 46 > c.keyCode && 8 != c.keyCode && 32 != c.keyCode) return !0;
    k = !0;
    clearTimeout(e);
    d.clearQueue("expand");
    h(function(c) {
        d[0].placeholder = "";
        a.fadeOut(100, c)
    });
    h(function(c) {
        d.animate({
            width: f,
            "max-width": f
        }, 100, c)
    });
    h(function() {
        0 == d.parent().find(".search-prompt").length && d.before('<span class="search-prompt">search:</span>')
    });
    3 == d.queue("expand").length && d.dequeue("expand")
}​

focusout:

function() {
    e = setTimeout(function() {
        h(function(c) {
            d.parent().find(".search-prompt").remove();
            c()
        });
        h(function(a) {
            d.animate({
                width: c,
                "max-width": c
            }, 100, a)
        });
        h(function(c) {
            n && "" == d[0].value && (d[0].value = "search");
            d[0].placeholder = "search";
            a.fadeIn(100, c)
        });
        3 == d.queue("expand").length && d.dequeue("expand");
        k = !1
    }, 200)
}​    

This answer shows you you can achieve anything you want in the WEB development.
                NOTHING IS SECRET!