Question

顶部的堆栈溢出搜索输入如何工作？它似乎随机扩展，或者当它是空的并且退格时被击中。

它背后的jQuery，html和css是什么？
是替换还是扩展链接？
我错过了其他额外的功能吗？

Answer 1

如何检索搜索文本框的jQuery代码？

这是<input>：

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

使用少量jQuery代码（并知道你在做什么），你可以拉动事件处理程序：

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

在该对象中，您可以看到他们有两个处理程序，一个用于keydown，另一个用于focusout。

它已经缩小了，但如果你愿意，你可以理解它：

<强> 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")}

焦点：

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)}

缩进版本：

<强> 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")
}

焦点：

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)
}

这个答案告诉你，你可以在WEB开发中实现你想要的任何东西 没有秘密！

Answer 2

如果你想用jQuery实现这个目标，那么基础是：

$('.search-input').keydown(function() {
    $(this).animate({width: '200px'}, {duration: 200});
});

$('.search-input').blur(function(){
    $(this).animate({width: '100px'}, {duration: 200});
});

Answer 3

jQuery，html和css背后。它取代或扩展链接。

$('.search-input').keydown(function() {
$(this).css( "height","100");
$("hlinks").show();
  });

$('.search-input').blur(function(){
$(this).css( "height","200");
 $("hlinks").hide();
});

堆栈溢出搜索输入如何工作？

3 个答案:

缩进版本：