Skip to content

Instantly share code, notes, and snippets.

@kharakhordindemo

kharakhordindemo/index.html

Created December 6, 2017 14:45
Show Gist options
  • Save kharakhordindemo/b85292e8194ed67703f82ca49c04651e to your computer and use it in GitHub Desktop.
Save kharakhordindemo/b85292e8194ed67703f82ca49c04651e to your computer and use it in GitHub Desktop.
Download ZIP
Выпадашка при вводе в Input
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Выпадашка при вводе в Input</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="content">
<div class="wrapper">
<form>
<div class="box-form">
<input type="text" class="form-control js-input" placeholder="Enter deviсe">
<ul class="box-form-list">
<li class="box-form-list_item">
<a href="#" class="js-link">Iphone</a>
</li>
<li class="box-form-list_item">
<a href="#" class="js-link">HTC</a>
</li>
<li class="box-form-list_item">
<a href="#" class="js-link">Samsung</a>
</li>
<li class="box-form-list_item">
<a href="#" class="js-link">Nokia</a>
</li>
</ul>
</div>
</form>
</div>
</main>
<script src="../js/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function() {
$('.js-input').keyup(function() {
if($(this).val() != '') {
$('.box-form-list').slideDown(500);
} else if ($(this).val() == '') {
$('.box-form-list').slideUp(500);
}
});//end keyup
$('.js-link').click(function() {
var linkText = $(this).text();
$('.js-input').val(linkText);
$('.box-form-list').slideUp(500);
return false;
});//end click
});//end ready
</script>
</body>
</html>
Raw
style.css
/*---Сброс стилей---*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, big, em, font, img, small, strong, sub, sup, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
:focus {
outline: 0;
}
ol, ul {
list-style: none;
}
table {
border-collapse: separate; border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
strong,b{
font-weight:bold
}
em{
font-style:italic
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
*{
box-sizing: border-box;
}
/*---Конец сброса стилей---*/
/*---Выпадашка при вводе в Input---*/
body{
font-family: "Arial", sans-serif;
background-color: #e8f3fc;
}
.content{
width: 960px;
margin: 50px auto 0 auto;
}
input{
width: 100%;
padding: 15px 25px;
font-size: 16px;
text-transform: uppercase;
border: 1px solid #969696;
}
.box-form-list{
display: none;
}
.box-form-list li{
display: block;
}
.box-form-list li a{
display: block;
padding: 10px 25px;
text-transform: uppercase;
text-decoration: none;
background-color: #fff;
border: 1px solid #969696;
border-top: none;
color: #000;
transition: all 0.5s;
}
.box-form-list li a:hover{
background-color: #efefef;
color: #404040;
}
/*---Выпадашка при вводе в Input конец---*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment