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

Question

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

1. 其背后的 jQuery、html 和 css 是什么？
2. 它会替换或扩展链接吗？
3. 还有其他我错过的附加功能吗？

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

在该对象中，您可以看到它们有两个处理程序，一个 forkeydown和一个 for focusout。

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

按键：

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

---

缩进版本：

按键：

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