Simple Mobile Search input

Developer
Tommaso Poletti
Size
3,400 Kb
Views
28,336
  1. Simple Mobile Search input Previews
  2. Simple Mobile Search input HTML Codes
  3. Simple Mobile Search input CSS Codes
  4. Simple Mobile Search input JS Codes

How do I make an simple mobile search input?

This is an example of search input, that could be put in a mobile template for an e-commerce or wheather or much more :). What is a simple mobile search input? How do you make a simple mobile search input? This script and codes were developed by Tommaso Poletti on 14 October 2022, Friday.

Simple Mobile Search input Previews
IQ Test

Simple Mobile Search input - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Mobile Search input</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="container">	<div id="logo">	<p>Country<span>Search</span></p>	</div>	<div id="continput">	<div id="input-group">	<input type="text" id="searchtext">	<button id="icon-src"><i class="fa fa-search" aria-hidden="true"></i></button>	</div>	</div>	<ul id="results"></ul>	<div id="header"></div>
</div> <script src="js/index.js"></script>
</body>
</html>

Simple Mobile Search input - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic);
body {	background: linear-gradient(to left, #FF00C7 0%,#00c7ff 100%);
}
#container {	width: 350px;	height: 600px;	border-radius: 0px;	overflow: hidden;	margin: auto;	position: absolute;	border-top: 4px solid tomato;	background: #1E202B;	top:calc(50% - 300px);	left:calc(50% - 175px);
}
#header {	background: #35394A;	width: 100%;	height: 100%;	text-align: center;	position: relative;	z-index: 1;	transition: 400ms ease-out;
}
#header.focus0 {	height: 15% !important;
}
#continput {	position: absolute;	width: 100%;	height: 100%;	background: transparent;	padding-left: 50px;	padding-right: 50px;	box-sizing: border-box;	transition: 150ms cubic-bezier(0, 2.15, 0.97, 0.36);	transition-delay: 500ms;
}
#continput.focus1 {	padding-left: 25px !important;	padding-right: 25px !important;
}
#input-group {	width: 100%;	height: 50px; background: #1B1B1D;	border-radius: 3px;	position: relative;	z-index: 2;	top: 320px;	overflow: hidden;	transition: top 350ms ease-in-out;
}
#input-group.focus2 {	top: 70px !important;
}
#searchtext {	width: 100%;	height: 100%;	border: none;	outline: none;	font-family: 'Roboto';	font-weight: 100;	font-size: 22px;	padding: 10px;	padding-right: 50px;	box-sizing: border-box;	background: #1B1B1D;	color: #ccc;
}
#icon-src {	position: absolute;	top: 11px;	right: -30px;	border: none;	background: transparent;	font-size: 20px;	cursor: pointer;	color: #999;	outline: none;	transition: 150ms cubic-bezier(0.53, 0.88, 0.72, 1.26);	transition-delay: 500ms;
}
#icon-src.focus3 {	right: 10px !important;	color: #999 !important;
}
#logo {	position: absolute;	top: 230px;	z-index: 2;	left: 30px;	transition: 300ms cubic-bezier(0.96, 1.11, 0.86, 1.13);	transition-delay: 150ms;
}
#logo.focus4 {	top: 17px;	transform: scale(0.6);	transition-delay: 0ms;
}
#logo p {	font-family: 'Roboto';	text-transform: uppercase;	font-weight: 900;	color: #fff;	font-size: 35px;	margin: 0;
}
#logo p span {	font-weight: 100;	font-style: italic;
}
#results {	position: absolute;	left: 25px;	top: 135px;	width: 300px !important;	background: transparent;	border-radius: 3px;	margin: 0;	padding: 0;	list-style-type: none;	box-sizing:border-box;	opacity: 0;	transition: 100ms ease-in;
}
#results li { background: #1B1B1D;	padding: 5px 10px 5px 10px;	transition: 200ms ease-in;
}
#results li:first-child {	padding-top:10px;	border-radius:3px 3px 0 0;
}
#results li:last-child {	padding-bottom:10px;	border-radius:0 0 3px 3px;
}
#results li a {	color: #999;	text-decoration: none;	font-family: 'Roboto';	font-weight: 100;	font-size: 20px;
}
#results li a:hover {	color: tomato;
}
#results.visible{	opacity: 1 !important;
}

Simple Mobile Search input - Script Codes JS Codes

var contInput = document.getElementById('continput');
var gInput = document.getElementById('input-group');
var input = document.getElementById('searchtext');
var button = document.getElementById('icon-src');
var logo = document.getElementById('logo');
var results = document.getElementById('results');
var redBg = document.getElementById('header');
var element = [redBg, contInput, gInput, button, logo, results];
input.addEventListener('focus', function(){	for (var i = 0; i < element.length; i++) {	element[i].classList.add('focus' + i);	}
}, false);
input.addEventListener('blur', function(){	for (var i = 0; i < element.length; i++) {	element[i].classList.remove('focus'+ i);	}
}, false);
input.addEventListener('keyup', function(){	if (results.childNodes.length === 0) {	results.classList.remove('visible');	} else {	results.classList.add('visible');	}
},false);
/* jquery for autocomplete*/
jQuery(document).ready(function($) { $("#searchtext").keyup(function() { getAutoCompleteValues($("#searchtext").val()); });
});
function getAutoCompleteValues(val) { $.ajax({ dataType: "jsonp", jsonp: "cb", cache: 'false', // jsonpCallback: "callback", url: "http://autocomplete.wunderground.com/aq?query=" + val + "&format=json", // cache: false, success: function(data) { // alert(data); if (val == "") { $("#results").html(''); $("#results").removeClass('result');}	else { $("#results").html(''); $("#results").addClass('result');	for (var i = 0; i < 8; i++) { var city = data.RESULTS[i]['name']; $("#results").append('<li><a href="#">'+city+'</a></li>');	}
} } });
}
Simple Mobile Search input - Script Codes
Simple Mobile Search input - Script Codes
Home Page Home
Developer Tommaso Poletti
Username tomma5o
Uploaded October 14, 2022
Rating 4.5
Size 3,400 Kb
Views 28,336
Do you need developer help for Simple Mobile Search input?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tommaso Poletti (tomma5o) Script Codes
Name
Css Codepen Profile
Washing Machine UI
Animation SVG with SMIL
Site Under Construction SVG animation
Search with Right Click
Button Ripple Effect - VanillaJS
Jelly Radio Button
Mappa-interattiva
Button Ideas for eCommerce
Menu Material Fixed
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!