Invulveld HTML

Status
Niet open voor verdere reacties.
helpendehand123

helpendehand123

Gebruiker
Lid geworden
3 mrt 2011
Berichten
260
Beste,

Voor op een website wil ik graag een balkje waarin je een term in kan vullen.
Bijvoorbeeld dat je in de balk "Amsterdam" invoert.
Mocht Amsterdam dan in het door mij aangegeven lijstje staan, dan krijg je een vinkje of kruisje,
staat Amsterdam er niet in, dan een ander icoontje en/of kleur lettertype.

Is dit gemakkelijk te maken met een scriptje?


mvg,
Helpendehand123
 
Ja dit is redelijk makkelijk te doen met Javascript. Gooi al je woorden waar je op wil zoeken in een array en vervolgens ga je voor elke toetsaanslag kijken of er iets overeenkomt.
 
Ik denkt dat dit je al stukje verder brengt.
Code: 
<form action="#" id="zoek-formulier">
	<input type="text" name="zoekveld">
</form>

<script>
	var woorden = ['Amsterdam', 'Eindhoven', 'Leeuwarden', 'Meppel'];

	$('#zoek-formulier input').on('input', function() {
		var val = $(this).val();

		for(key in woorden) {
			console.log(woorden[key]);
		}
	})
</script>
 
bedankt voor je snelle antwoord.
Helaas ben ik zelf niet zo'n ster in Javascript.
Ik snap de variabelen 'Amsterdam' enzo, die kan ik zelf wijzigen, maar voor de rest snap ik er niet zoveel van..

Misschien maar gewoon laten varen dan dit idee ;)

Toch bedankt!
 
Ik zou het zeker niet laten varen.
Ik kan je wel een kant en klaar script geven maar daar leer je zelf niks van :(

Ik kan wel proberen uit te leggen wat ik je gegeven heb.
Ik zal de Javascript opknippen in een paar stukjes.

Met deze selector selecteer ik een element met het ID: 'zoek-formulier' en daarbinnen selecteer ik een input
Code: 
$('#zoek-formulier input').on('input', function() { // De .on('input) houdt in de gaten of de value van die input veranderdt
	var val = $(this).val(); // De value van de input slaan we op ([URL="http://api.jquery.com/val/"]http://api.jquery.com/val/[/URL])
})

Dit zal waarschijnlijk het meest complexe gedeelte zijn.
We gebruiken hier een for loop(http://www.w3schools.com/js/js_loop_for.asp) om door elke waarde in de woorden array te 'loopen'.
Omdat je zelf geen 'keys' opgeeft zal Javascript zelf alles gaan nummeren van 0 t/m hoeveel waardes ik in de array stop.

In principe kun je 'key' veranderen met bijna alles, (bijv sleutel), maar omdat je ze als key binnen de array gaat gebruiker is key gewoon leesbaarder)
Code: 
for(sleutel in woorden) {
        // Nu zie je netjes in je console de getallen 0 t/m 3 (een array begint altijd bij 0, niet 1)
        // Je ziet dus 4 getallen, dit komt omdat je 4 waardes in je array gestopt hebt ('Amsterdam', 'Eindhoven', 'Leeuwarden', 'Meppel').
	console.log(sleutel);
}

Als je nu naar de woorden array kijkt zou je 'm eigenlijk zo moeten zien:
Code: 
woorden[0] ='Amsterdam';
woorden[1] ='Eindhoven';
woorden[2] ='Leeuwarden';
woorden[3] ='Meppel';
Die nummering komt dus omdat je zelf geen keys opgeeft.

Als je bijv. een specifiek woord wilt ophalen doe je het volgende:
Code: 
console.log(woorden[1]); // Geeft Eindhoven terug
console.log(woorden[3]); // Geeft Meppel terug

Hopelijk is de for loop in mijn vorige post nu wat duidelijker.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan