Display Search when any key is pressed - javascript

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.

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.

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.

Related

How to display the date field in input box after submitting the form in javascript?

I need to display the user-selected date in the input box on the same page once the form gets submitted.
I was referring this link and if I try to implement the same in my code, my form is not getting submitted and am not able to see the desired output.
Here is my code:
HTML:
<form method="POST" id="myform">
<div class="de-section de-cart-stat d-flex align-items-center flex-wrap mt-4">
StartDate:<input type="date" id="stdate" name="stname">
EndDate:<input type="date" id="eddate" name="edname">
<button id="submitbtn" type="submit">Submit</button>
JS:
$("#submitbtn").click(function() {
if ($("#stdate").val().length === 0 || $("#eddate").val().length === 0) {
$("#errorModal").modal("show");
return false;
}
else{
$("form").submit();
}
});
Any ideas to display the dates in the input box after clicking the submit button using javascript.?
If you want your cake and eat it too, use AJAX
$("#myform").on("click", function(e) {
e.preventDefault(); // stop submission
if ($("#stdate").val().length === 0 || $("#eddate").val().length === 0) {
$("#errorModal").modal("show");
return;
}
$.post("someUrl",$(this).serialize(),function(res) {
$("someContainer").html(res)
});
});

Need to evaluate content in drop-down in Javascript

As stated in the topic I need to evaluate two fields, one from a drop-down menu item, and one for a text input type field. both in HTML of course. I want to test if the fields are empty, zero, whatever in that context.
I have tried to alter the code, but cannot seem to find the right code.
$(document).ready(function() {
$(function() {
$("#companyDialog").dialog({
autoOpen: false
});
$("#companyButton").on("click", function() {
$("#companyDialog").dialog("open");
});
});
// Validating Form Fields.....
$("#companySubmit").click(function(e) {
var comnpanyname = $("#companyname").val();
var editcompanyscombo = $("#editcompanyscombo").val();
if (companyname === '' || editcompanyscombo === '') {
alert("Please fill all fields marked with an *!");
e.preventDefault();
} else if (editcompanyscombo === '0') {
alert("Select comany to update!");
e.preventDefault();
} else {
alert("Form Submitted Successfully.");
}
});
});
<div class="container">
<div class="main">
<div id="companyDialog" title="Edit company">
<form action="" method="post">
<## CompanyEditCombo ##><br>
<label>New company name:</label>
<input id="companyname" name="companyname" type="text">
<input id="companySubmit" type="submit" value="Submit">
</form>
</div>
<input id="companyButton" type="button" value="Open Company Edit Dialog Form">
</div>
</div>
The fields pop up, but they do not alert if the values are zero or empty.
So far I could see from these snippets, please replace === '' and === '0' by == null
(Double equality comparison operator does not aimed to compare the types. That is why, one should use it because null is type object. s. Developer Mozilla)

Enter key doesn't activate button

I have a form with one field that the user needs to type into, and a button underneath that when clicked, does some jQuery and hides the login-form. But when I hit enter after typing something in, the page refreshes...
There's part of me that thinks it doesn't need to be an <input> or a <form>
I don't actually need to post anything. I have tried changing the input to a <button> which completely ruins my styling and still doesn't work. What's the best way of getting round this?
<div class="login-page">
<div class="form">
<form class="login-form" method="POST">
<!-- user inputs -->
<p class="phc">PHC:</p><input type="text" id="username" placeholder="Enter Your PHC Here" />
<!-- your submit button -->
<input class="login" type="button" id="submit" value="login">
</div>
True, Adam. If the form does not contain the type submit button, a keypress event has to be added manually. Otherwise Enter will act as the Accept Button on the form.
You need to attach keypress event to the form or at least the field. For convenience, you also need to combine the callback functions into one.
$('#username').on('keypress', function(event){
var code = event.keyCode || event.which;
if(code == 13){
// submit the form.
}
});
$('#username').on('keypress', function(event){
var code = event.keyCode || event.which;
if(code == 13){
console.log('Submitting form');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="login-form" method="POST">
<p class="phc">PHC:</p><input type="text" id="username" placeholder="Enter Your PHC Here" />
<input class="login" type="button" id="submit" value="login">
</form>
If the enter key is pressed when focused to an input field inside a form that has a submit button, the default browser behaviour is to fire a submit event on that form. You can prevent this happening by either:
return false;
or
e.preventDefault();
Full code:
$('.login-form').on('submit', function() {
return false;
});
Fiddle: https://jsfiddle.net/nc1e2gm6/
Bear in mind that if you go down the route of using e.preventDefault(); instead or return false;, you need to pass the e variable from the function call, like:
$('.login-form').on('submit', function(e) { ...
Don't think i explained it very well but i have fixed it, the enter key now activates the submit button rather than refresh the page.
$("form").submit(function() { return false; });
$(document).ready(function(){
$('#username').keypress(function(e){
if(e.keyCode==13)
$('#submit').click();
});
});

How to solve a call to click button without an alert on key down?

I have this code:
<input type="text" name="name" onkeydown="test(event)" />
function test(event){
if (event.keyCode == 13) {
$("#myButton").click();
return false;
}
}
It's not working as expected this way, but if I add an alert to the code like this:
function test(event){
alert("Why?!");
if (event.keyCode == 13) {
$("#myButton").click();
return false;
}
}
My button is this into gsp file:
<button type="submit" class="btn btn-primary" name="myButton" value="Submit">
Button
</button>
My form is this:
<g:form name="searchForm" controller="party" action="searchObject" class="form-horizontal margin-bottom-20">
</g:form>
Then everything works...
Someone can tell me what's going on and how can I solve this problem?
HTML:
<input type="text" name="name" onkeydown="test(event)" />
<button id="myButton">Button</button>
Javascript:
var test = function (event) {
if (event.keyCode == 13) {
$("#myButton").click();
return false;
}
}
$(function () {
$("#myButton").click(function () {
alert("This button was clicked using the enter key");
});
});
If i understood correctly, you are trying to invoke a click event with a key press (in this case, the enter key). Fiddle here: http://jsfiddle.net/jsu2jsx8

Clear html input preserving back(ctrl+z)

When I use jquery to clear content of input:
$('input#myinput').val('');
everything is fine except for the user cannot use ctrl+z to obtain the previous text. is there any way to preserve ctrl+z ?
is there any way behaves as if it is cleared by user?
Suppose it gets cleared on clicking a button:
$(document).ready(function() {
var input = $('input#myinput').val();
$('#button').click(function() {
$('input#myinput').val('');
});
$(document).keydown(function(e) {
if (e.which === 90 && e.ctrlKey) {
$('input#myinput').val( input );
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="myinput" value="text"/>
<input type="button" id="button" value="Button" />

Categories

Resources