Techniktype
Cadet 4th Year
- Registriert
- Jan. 2020
- Beiträge
- 121
Code:
<style>
/* Searchbox + Searchcontent */
input,
button{
outline: none;
}
.search-box{
font-family: Arial;
position: relative;
margin: 7px;
display: block;
float: left;
}
.search-input{
padding: 11px;
border: none;
background-color: #fff;
border: 1px solid #c62828;
}
.search-btn{
padding: 12px;
margin-left: -6px;
background-color: #c62828;
border: none;
color: #fff;
cursor: pointer;
}
.search-content{
position: absolute;
top: 100%;
background-color: #fff;
width: 100%;
height: 150px;
max-height: 0px;
overflow: hidden;
z-index: 0;
transition: max-height .25s ease;
box-shadow: 0px 1px 5px 0px #333;
height: auto;
border-radius: 0px 0px 5px 5px;
}
.search-input:focus ~ .search-content,
.search-content:hover{
max-height: 150px;
}
.search-con1{
/* damit oben ein Border entsteht und der
Inhalt nicht am Hintergrund der Seite klebt */
padding: 5px 0px;
}
.search-con2{
max-height: 140px;
/*Nochmal ein Border damit der Hintergrund
von Link:hover nicht am Rand klebt */
padding: 0px 5px;
overflow: auto;
}
.search-content a{
display: block;
padding: 8px 20px;
font-size: 15px;
font-weight: 100;
border-radius: 5px;
text-decoration: none;
cursor: pointer;
color: #c62828;
}
.search-content a:hover{
background-color: #c62828;
color: #fff;
box-shadow: inset 0px 0px 10px 2px #851414;
}
.not-found{
color: #b71c1c;
display: none;
padding: 10px 20px;
font-weight: 700;
}
</style>
<form class="search-box">
<input class="search-input" id="search-input" type="search" oninput="search();" onkeyup="search();" autocomplete="off">
<button class="search-btn">Suchen</button>
<div class="search-content">
<div class="search-con1">
<div class="search-con2">
<a href="">Link 1</a>
<a href="">Link 2</a>
<a href="">Link 3</a>
<a href="">Link 4</a>
<a href="">Link 5</a>
<a href="">Link 6</a>
<a href="">Link 7</a>
<a href="">Link 8</a>
<a href="">Link 9</a>
<a href="">Link 10</a>
<p id="not-found" class="not-found">nichts gefunden</p>
</div>
</div>
</div>
</form>
<script>
var searchinput = document.getElementById("search-input");
var items = document.querySelectorAll(".search-content a");
var array = [];
var itemslen = items.length;
var notfound = document.getElementById("not-found");
for(var i = 0; i < itemslen; i++)
array.push(items[i].innerHTML.toLowerCase());
function search() {
var integer = 0;
var string = searchinput.value.toLowerCase();
for(var i = 0; i < itemslen; i++) {
if(array[i].indexOf(string) == -1)
items[i].setAttribute('style', 'display:none');
else{
items[i].setAttribute('style', 'display:block');
integer++;
}
}
if(integer == 0)
notfound.setAttribute('style', 'display:block');
else
notfound.setAttribute('style', 'display:none');
}
</script>Ich möchte wissen wie ihr den Code bezüglich Geschwindigkeit, Aussehen und Scriptgröße findet.
Ich wüsste ehrlich gesagt nicht wie ich ihn verbessern könnte ohne den Effekt den ich möchte zu erhalten. Aber die Verschachtelung mit search-con1 und -2 gefällt mir nicht so wirklich...
Bin ich ein ziemlich schlechter Entwickler?
Ich wollte vielleicht ein Webprojekt starten...
Liebe Grüße
