Stack Overflow en español Asked on November 10, 2021
Tengo un input de tipo submit y otro input de tipo search (Es un formulario para buscar) en mi página. El cual necesito que al dar click en submit se despliegue el search(inicialmente está oculto), luego que al dar click otra vez en submit busque lo que se escribió en search.
Por el momento funciona casi como lo necesito pero el input search tiene required, me lo piden que funcione igual sin que tenga required.
Ya tengo la funcionalidad de buscar, pero no la de abrir el search al primer click y buscar al segundo click en submit.
También que al dar click en cualquier otra parte que no se sea submit, se cierre el input search.
La funcionalidad es como el de esta página:
search-page
//Muestra el search.
$('.search-submit').click(function() {
$('.search-input').fadeIn();
});form {
display: flex;
position: relative;
padding: 10px;
background-color: beige;
width: 100%;
padding: 20px;
}
input[type=search] {
display: none;
position: absolute;
left: 0;
background: lightblue;
border: 1px solid gray;
padding: 5px 10px;
font-size: 14px;
top: 50%;
transform: translateY(-50%);
}
input[type=submit] {
background-color: orange;
background-position: center center;
background-repeat: no-repeat;
background-size: auto;
border: 0;
padding: 5px;
position: absolute;
left: 200px;
top: 50%;
transform: translateY(-50%);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="search" method="get" action="" role="search">
<input class="search-input" type="search" name="s" required>
<input class="search-submit" type="submit" role="button" value="search">
</form>Aqui te pongo un ejemplo de como puedes hacer lo que quieres con jquery. Ejecuta el codigo de abajo. Incluso te inclui la navegacion para que te des una idea de como incluirla con el search. Nota que el boton search en el primer click, despliega el input de busqueda y en el segundo click (si es que el usuario escribio algo), postea el form. Pero tambien nota que si el usuario no postea nada, el input no desaparece, el usuario tendria que volver a dar click en search para que desaparezca el input o dar click en otro lugar en el documento, solo para que lo tengas en cuenta al colocar tus menus si esque vas a usar esto en una barra de navegacion.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Jquery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$('#searchButton').click(function(event) {
var $value = $('#searchValue').val();
if ($value === "") {
$('#searchValue').toggle("slide", {
direction: 'right'
});
event.preventDefault();
} else {
return true;
}
});
$(document).on("click", function(event) {
if (!$(event.target).closest(".searchForm").length) {
$("#searchValue").hide();
// Showing the hint message
}
});
});
</script>
<style>
.nav {
display: flex;
box-sizing: border-box;
width: 100%;
background-color: beige;
align-items: center;
}
.nav a {
text-decoration: none;
padding: 10px;
color: brown;
text-transform: uppercase;
font-family: sans-serif;
font-weight: bold;
}
.nav a:hover {
background-color: burlywood;
}
.searchForm {
position: relative;
}
.searchValue {
display: none;
background: lightblue;
border: 1px solid gray;
padding: 5px 10px;
font-size: 14px;
width: 200px;
position: absolute;
left: -216px;
z-index: 1;
}
.searchButton {
background-color: orange;
border: none;
padding: 7px;
margin: 0px 10px;
}
</style>
</head>
<body>
<div class="nav">
<div style="flex-grow: 1;"></div>
<a href="#">Menu</a>
<a href="#">Menu</a>
<a href="#">Menu</a>
<form id="searchForm" method="GET" class="searchForm">
<input type="text" name="search" id="searchValue" class="searchValue">
<button type="submit" id="searchButton" name="search" value="submit" class="searchButton">Search</button>
</form>
</div>
</body>
</html>Answered by xelfury on November 10, 2021
Agrega una variable para saber el estado del input, cuando hagas clic en el botón analizas esa variable para mostrar el input o procesar el formulario.
Para ocultarlo, agrega el evento onclick al documento, donde analizas si el clic no involucra botón o el mismo input.
//Muestra el search.
let oculto = true;
$(document).click(function() {
// Ocultar cuando el clic no fue en botón ni input
if($(event.target).attr('class') != 'search-submit' && $(event.target).attr('class') != 'search-input') {
$('.search-input').fadeOut();
oculto = true;
}
});
$('.search-submit').click(function() {
if(oculto) {
// Mostrar solo si está oculto
$('.search-input').fadeIn();
oculto = false;
// Evitar que se procese el formulario
event.preventDefault();
} else {
// Si vas a hacer una petición AJAX
// También deberías evitar el proceso normal del formulario
// De lo contrario, no es necesaria otra acción
}
});form {
display: flex;
position: relative;
padding: 10px;
background-color: beige;
width: 100%;
padding: 20px;
}
input[type=search] {
display: none;
position: absolute;
left: 0;
background: lightblue;
border: 1px solid gray;
padding: 5px 10px;
font-size: 14px;
top: 50%;
transform: translateY(-50%);
}
input[type=submit] {
background-color: orange;
background-position: center center;
background-repeat: no-repeat;
background-size: auto;
border: 0;
padding: 5px;
position: absolute;
left: 200px;
top: 50%;
transform: translateY(-50%);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="search" method="get" action="" role="search">
<input class="search-input" type="search" name="s" required>
<input class="search-submit" type="submit" role="button" value="search">
</form>Answered by Triby on November 10, 2021
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP