<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Simple LiveSearch</title>
<style>
.container {
max-width: 800px;
padding: 25px;
margin: auto;
}
.live-search-list {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 1em;
background-color: #369;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
font-family: 'Lato', sans-serif;
color: #fff;
outline: none;
}
.live-search-box {
width: 100%;
display: block;
padding: 1em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #3498db;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
outline: none;
}
.live-search-list li {
display: block;
text-decoration: none;
color: fff;
padding: 10px 20px;
margin: auto 15px;
}
li {
border-bottom: 2px solid #3498db;
}
li:last-of-type {
border: none;
}
li:hover{
cursor: pointer;
border-radius: 25px;
border: none;
opacity: 1;
background: #f3f8f8;
color: #9e9e9e;
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
</head>
<body translate="no">
<head>
<meta charset="UTF-8">
<title>Live Search</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<input type="text" class="live-search-box" placeholder="search here">
<ul class="live-search-list">
<li>This</li>
<li>Is</li>
<li>My</li>
<li>Search</li>
<li>With</li>
<li>Black Jack</li>
<li>and</li>
<li>test</li>
<li>bells</li>
</ul>
</div>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src = "js/main.js"></script>
</body>
<script id="rendered-js" >
jQuery(document).ready($ => {
const ENTER = 13;
$('.live-search-list li').each(function () {
$(this).attr('data-search-term', $(this).text().toLowerCase());
});
$('.live-search-box').on('keyup', function () {
const searchTerm = $(this).val().toLowerCase();
$('.live-search-list li').each(function () {
$(this).filter('[data-search-term *= ' + searchTerm + ']').length > 0 || searchTerm.length < 1 ?
$(this).show() :
$(this).hide();
});
});
$('input[class=live-search-box]').keydown(function (e) {
if (e.keyCode == ENTER) {
e.preventDefault();
e.stopPropagation();
const toAdd = $('input[class=live-search-box]').val();
if (toAdd) {
$('<li/>', {
'text': toAdd,
'data-search-term': toAdd.toLowerCase() }).
appendTo($('ul'));
$('input[class=live-search-box]').val('');
console.log('User has entered ' + toAdd);
}
}
});
$(document).on('dblclick', 'li', function () {
$(this).fadeOut('slow', function () {
$(this).remove();
});
});
});
//# sourceURL=pen.js
</script>
</body>
</html>