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

keydownそのオブジェクトには、 用と用の 2 つのハンドラーがあることがわかります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、html、およびcss。リンクを置換または展開します。

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

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

Answer 3

jQueryを使用してこれを実現したい場合、基本は次のとおりです。

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

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