javascript - 按下任意键时显示搜索

Question

我目前正在实现类似于 Designspiration 的搜索.当您浏览网站并按任意键时，会出现搜索字段，其中已包含您的键。

我已经实现了一半，只是不知道如何进行任何击键。以下是我到目前为止所获得的内容，它可以在单击按钮时显示全屏搜索。

Jquery

$(function () {
    $('a[href="#search"]').on('click', function(event) {
        event.preventDefault();
        $('#search').addClass('open');
        $('#search > .search-container > form > input[type="search"]').focus();
    });

    $('#search, .search-container, #search button.close').on('click keyup', function(event) {
        if (event.target == this || event.target.className == 'close' || event.keyCode == 27) {
            $(this).removeClass('open');
        }
    });  
});

HTML

<div id="search">
<button type="button" class="close">×</button>
<div class="search-container">
    <span>Type to start Searching</span>
        <form class="search" method="get" action="<?php echo home_url(); ?>"     role="search">
            <input class="search-input" type="search" name="s" placeholder=""     autocomplete="off">
        </form>
    </div>
</div>

我将如何实现搜索，以便当用户刚开始在网站上输入内容时，搜索框就会出现并且用户开始在其中输入内容？

任何帮助都会很棒。

Answer 1

这个怎么样？ <强> DEMO

$('#searchPage').fadeOut(0);
var isTypingInput=false,
    isSearching=false;
$('input').not('#theSearch').focus(function(){
    isTypingInput=true;
});
$('input').not('#theSearch').blur(function(){
    isTypingInput=false;
});
$(document).on('keyup',function(e){
    if(!isTypingInput && !isSearching){
        if(/([a-zA-Z0-9])+/.test(String.fromCharCode(e.which))){
            $('#searchPage').fadeIn(200);
            $('#theSearch').focus().val(String.fromCharCode(e.keyCode));
            isSearching=true;
        }
    }
});
$('#searchPage').click(function(e){
    if($('#theSearch').is(e.target)) return false;
    $('#searchPage').fadeOut(200);
    isSearching=false;
});

您会看到，如果您在页面的输入框内键入内容，将不会出现搜索。

您也可以通过点击搜索输入以外的其他地方来关闭搜索页面。