CODEWITHSUNDEEP
javascriptjquery
Jonathan
Jonathan

Reputation: 683

Display Search when any key is pressed

I'm currently in the process of implementing a search similar to Designspiration. When you're browsing the website and press any key the search field appears with your key already within it.

I'm already halfway in implementing this, just can't figure out how to do any keystroke. Below is what I've got so far which makes a full screen search appear when a button is clicked.

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>

How would I go about implementing search, so when a user just starts typing on the website the search box appears and the user starts typing within it?

Any help would be brilliant.

Upvotes: 3

Views: 2254

Answers (2)

rojobuffalo
rojobuffalo

Reputation: 3243

http://jsfiddle.net/rblakeley/8utrsfgp/

jQuery

$(function () {
    var $field = $('.search-container input'),
        character;

    $(window).on('keyup', function (event) {
        if ($(event.target).is('input, textarea')) return;
        character = String.fromCharCode(event.keyCode);

        if (!$field.val().length) {
            $field.focus().val(character);
        }
    });
    
});

This isn't bullet-proof but it's a starting point.

Upvotes: 1

Amin Jafari
Amin Jafari

Reputation: 7207

how about this? 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;
});

you'll see that if you type inside the input on the page, the search will not appear.

also you can close the search page by clicking somewhere other than the searching input.

Upvotes: 2

Related Questions