Hallo zusammen,
gibt es eine Möglichkeit über das Inputfeld, ein bestimmten Text auszugeben?
Bild dient als Beispiel.
Im Inputfeld sollen die Länderkürzel eingegeben werden und durch den Button Enter, dann den jeweiligen Text anzeigen lassen, zu den Länderkürzel.
Über Hilfe würde ich mich freuen.
<img class="vorschau" src="image/input-text-ausgeben.jpg" alt="bild">
Code
<!doctype html>
<html lang="de">
<head>
<title></title>
<style>
*{
margin:0;
padding:0;
}
#box{
width:90%;
margin:0 auto;
border:1px solid black;
border-radius:10px;
min-height:200px;
padding:10px;
display:flex;
box-shadow:3px 3px 3px grey;
}
label{
text-align:center;
font-size:20px;
}
select{
height:30px;
width:80%;
border-radius:4px;
font-size:25px;
padding:0px 5px;
}
h1{
text-align:center;
text-decoration:underline;
}
.box{
padding:5px;
display:flex;
}
.left{
flex:1;
flex-direction:column;
border-right:2px solid black;
}
.right{
flex:2;
text-align:center;
flex-direction:column;
}
div img{
width:80%;
margin:0 auto;
}
ul,li{
list-style:none;
background:lightgrey;
}
nav ul li ul{
max-height:60vh;
overflow:auto;
}
.makiert{
background:yellow;
font-weight:900;
}
li{
border:1px solid black;
overflow:hidden;
padding:0 10px;
cursor:pointer;
}
li:hover{
background:rgba(0,222,0,0.7);
}
nav ul li:nth-child(1){
overflow:hidden;
padding:0;
}
#treffer li:nth-child(1){
padding:10px 10px 10px 15px;
}
li span{
margin:0 1px;
padding:2px;
font-size:20px;
}
ul{
}
nav{
width:90%;
margin:0 auto;
}
#kurz{
width:100%;
padding:2px 5px;
font-size:20px;
outline:none;
}
#lang{
text-align:center;
font-weight:600;
font-size:22px;
text-decoration:underline;
}
#img{
margin:0 auto;
width:90%;
}
.list-group{
margin-bottom:0 !important;
}
</style>
</head>
<body>
<h1>Länderkürzel</h1>
<div class="card" id="box">
<div class="box left">
<label>Kürzel</label>
<nav>
<ul>
<li>
<input type="text" id="kurz">
<ul id="treffer" class='list-group'>
</ul>
</li>
</ul>
</nav>
</div>
<div class="box right">
<div id="lang">
</div>
<div id="img"></div>
</div>
</div>
<script>
var landertexte=[['AF','Afghanistan'],['AX','Åland'],['AL','Albanien'],['DZ','Algerien'],['AS','Amerikanisch'],['DZ','Algerien'],['AS','Amerikanisch-Samoa'],['AD','Andorra'],['AO','Angola'],['AI','Anguilla'],['AQ','Antarktis'],['AG','Antigua und Barbuda'],['AR','Argentinien'],['AM','Armenien'],['AW','Aruba'],['AU','Australien'],['AT','Österreich'],['AZ','Aserbaidschan'],['BS','Bahamas'],['BH','Bahrain'],['BD','Bangladesch'],['BB','Barbados'],['BY','Weißrussland'],['BE','Belgien'],['BZ','Belize'],['BJ','Benin'],['BM','Bermuda'],['BT','Bhutan'],['BO','Bolivien'],['BQ','Bonaire],[ Sint Eustatius und Saba '],['BA','Bosnien und Herzegowina'],['BW','Botswana'],['BV','Bouvetinsel'],['BR','Brasilien'],['IO','Britisches Territorium im Indischen Ozean'],['VG','Britische Jungferninseln'],['BN','Brunei'],['BG','Bulgarien'],['BF','Burkina Faso'],['BI','Burundi'],['KH','Kambodscha'],['CM','Kamerun'],['CA','Kanada'],['CV','Kap Verde'],['KY','Kaimaninseln'],['CF','Zentralafrikanische Republik'],['TD','Tschad'],['CL','Chile'],['CN','China'],['CX','Weihnachtsinsel'],['CC','Kokosinseln'],['CO','Kolumbien'],['KM','Komoren'],['CK','Cookinseln'],['CR','Costa Rica'],['HR','Kroatien'],['CU','Kuba'],['CW','Curacao'],['CY','Zypern'],['CZ','Tschechische Republik'],['CD','Demokratische Republik Kongo'],['DK','Dänemark'],['DJ','Dschibuti'],['DM','Dominica'],['DO','Dominikanische Republik'],['TL','Osttimor'],['EC','Ecuador'],['EG','Ägypten'],['SV','El Salvador'],['GQ','Äquatorialguinea'],['ER','Eritrea'],['EE','Estland'],['ET','Äthiopien'],['FK','Falkland-Inseln'],['FO','Färöer-Inseln'],['FJ','Fidschi'],['FI','Finnland'],['FR','Frankreich'],['GF','Französisch-Guayana'],['PF','Französisch-Polynesien'],['TF','Französische Süd- und Antarktisgebiete'],['GA','Gabun'],['GM','Gambia'],['GE','Georgien'],['DE','Deutschland'],['GH','Ghana'],['GI','Gibraltar'],['GR','Griechenland'],['GL','Grönland'],['GD','Grenada'],['GP','Guadeloupe'],['GU','Guam'],['GT','Guatemala'],['GG','Guernsey'],['GN','Guinea'],['GW','Guinea-Bissau'],['GY','Guyana'],['HT','Haiti'],['HM','Heard und McDonaldinseln'],['HN','Honduras'],['HK','Hongkong'],['HU','Ungarn'],['IS','Island'],['IN','Indien'],['ID','Indonesien'],['IR','Iran'],['IQ','Irak'],['IE','Irland'],['IM','Isle of Man'],['IL','Israel'],['IT','Italien'],['CI','Elfenbeinküste'],['JM','Jamaika'],['JP','Japan'],['JE','Jersey'],['JO','Jordanien'],['KZ','Kasachstan'],['KE','Kenia'],['KI','Kiribati'],['KW','Kuwait'],['KG','Kirgisistan'],['LA','Laos'],['LV','Lettland'],['LB','Libanon'],['LS','Lesotho'],['LR','Liberia'],['LY','Libyen'],['LI','Liechtenstein'],['LT','Litauen'],['LU','Luxemburg'],['MO','Macao'],['MK','Mazedonien'],['MG','Madagaskar'],['MW','Malawi'],['MY','Malaysia'],['MV','Malediven'],['ML','Mali'],['MT','Malta'],['MH','Marshallinseln'],['MQ','Martinique'],['MR','Mauretanien'],['MU','Mauritius'],['YT','Mayotte'],['MX','Mexiko'],['FM','Mikronesien'],['MD','Moldawien'],['MC','Monaco'],['MN','Mongolei'],['ME','Montenegro'],['MS','Montserrat'],['MA','Marokko'],['MZ','Mosambik'],['MM','Myanmar'],['NA','Namibia'],['NR','Nauru'],['NP','Nepal'],['NL','Niederlande'],['NC','Neukaledonien'],['NZ','Neuseeland'],['NI','Nicaragua'],['NE','Niger'],['NG','Nigeria'],['NU','Niue'],['NF','Norfolkinsel'],['KP','Nordkorea'],['MP','Nördliche Marianen'],['NO','Norwegen'],['OM','Oman'],['PK','Pakistan'],['PW','Palau'],['PS','Palästinensische Autonomiegebiete'],['PA','Panama'],['PG','Papua-Neuguinea'],['PY','Paraguay'],['PE','Peru'],['PH','Philippinen'],['PN','Pitcairninseln'],['PL','Polen'],['PT','Portugal'],['PR','Puerto Rico'],['QA','Katar'],['CG','Republik Kongo'],['RE','Réunion'],['RO','Rumänien'],['RU','Russland'],['RW','Ruanda'],['BL','Saint-Barthélemy'],['SH','St. Helena'],['KN','St. Kitts und Nevis'],['LC','St. Lucia'],['MF','St. Martin'],['PM','Saint-Pierre und Miquelon'],['VC','St. Vincent und die Grenadinen'],['WS','Samoa'],['SM','San Marino'],['ST','São Tomé und Príncipe'],['SA','Saudi-Arabien'],['SN','Senegal'],['RS','Serbien'],['SC','Seychellen'],['SL','Sierra Leone'],['SG','Singapur'],['SX','Sint Maarten'],['SK','Slowakei'],['SI','Slowenien'],['SB','Salomon-Inseln'],['SO','Somalia'],['ZA','Südafrika'],['GS','Südgeorgien und die Südlichen Sandwichinseln'],['KR','Südkorea'],['SS','Südsudan'],['ES','Spanien'],['LK','Sri Lanka'],['SD','Sudan'],['SR','Suriname'],['SJ','Svalbard und Jan Mayen'],['SZ','Swasiland'],['SE','Schweden'],['CH','Schweiz'],['SY','Syrien'],['TW','Taiwan'],['TJ','Tadschikistan'],['TZ','Tansania'],['TH','Thailand'],['TG','Togo'],['TK','Tokelau'],['TO','Tonga'],['TT','Trinidad und Tobago'],['TN','Tunesien'],['TR','Türkei'],['TM','Turkmenistan'],['TC','Turks- und Caicosinseln'],['TV','Tuvalu'],['VI','Amerikanische Jungferninseln'],['UG','Uganda'],['UA','Ukraine'],['AE','Vereinte Arabische Emirate'],['GB','Großbritannien'],['US','Vereinigte Staaten von Amerika (USA)'],['UM','United States Minor Outlying Islands'],['UY','Uruguay'],['UZ','Usbekistan'],['VU','Vanuatu'],['VA','Vatikanstadt'],['VE','Venezuela'],['VN','Vietnam'],['WF','Wallis und Futuna'],['EH','Westsahara'],['YE','Jemen'],['ZM','Sambia'],['ZW','Simbabwe']];
lk=document.getElementById('kurz');
lk.addEventListener('keyup',function(){
var fu=array_search(lk.value)
document.getElementById('treffer').innerHTML=fu;
if(fu.length>=1){
libox=document.querySelectorAll('#treffer li');
libox.forEach(function(u){
u.addEventListener('click',function(){
zeige(u.innerText.toLowerCase())
lk.value=u.innerText;
libox[0].parentElement.innerHTML='';
})
})
}
})
function zeige(ku){
landertexte.filter(function(v,i) {
if(v[0].toLowerCase()==ku){
document.getElementById('lang').innerHTML=v[1];
document.getElementById('img').innerHTML="<img src='/image/flag/"+v[0].toLowerCase()+".svg'>";
}
});
}
function array_search(letter){
var anf='';
var mit='';
if(letter.length<=0){
return '';
}
for(t=0;t<landertexte.length;t++){
ku=landertexte[t][0].toLowerCase();
if(ku==letter.toLowerCase()){
zeige(ku);
return '';
}else{
if(ku[0]==letter.toLowerCase()){
anf+="<li id='"+ku+"' class='list-group-item'><span class='makiert'>"+ku[0].toUpperCase()+"</span><span>"+ku[1].toUpperCase()+"</span></li>";
}
if(ku[1]==letter.toLowerCase()){
mit+="<li id='"+ku+"' class='list-group-item'><span>"+ku[0].toUpperCase()+"</span><span class='makiert'>"+ku[1].toUpperCase()+"</span></li>";
}
we="<li><strong>Weitere..</strong></li>";
}
}
return anf+''+we+''+mit;
}
</script>
</body>
</html>