Search display when pressing any key
I am currently doing a search similar to Designspiration . When you browse the website and press any key, the search box appears along with your key.
I'm already halfway to implementing this, just can't figure out how to do any keystroke. Below is what I have so far, which results in a full screen view when the button is pressed.
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 can I do a search, so when the user just starts typing on the website, a search box appears and the user starts typing inside?
Any help would be brilliant.
source to share
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 will 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 search input.
source to share
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);
}
});
});
It is not bulletproof, but a starting point.
source to share