Per Eingabe in Textfeld zu Tabelleneintrag springen

O

Ozzy Ozborn

Erfahrenes Mitglied
Hi,

ich habe ein Problem, bei dem Ihr mir hoffentlich helfen könnt. Und zwar habe ich eine Tabelle, die ein paar hundert Zeilen besitzt (spezielle Codes). Die Codes sind dabei 4-stellig. Nun möchte ich gerne über ein Textfeld direkt bei Eingabe des Codes zu der entsprechenden Zeile springen um dem Nutzer das ganze scrollen abzunehmen. Zusätzlich wäre es schön, wenn bereits während der Eingabe schon einmal zu dem Bereich (also zu der ersten Zeile, die mit der eingegebenen Zahl übereinstimmt) springt. Anker o.ä. kann ich noch nach belieben setzen. Habt Ihr eine Idee, wie man das am besten umsetzt?

Vielen Dank im Voraus******
 
Hm also hab mal versucht zu basteln.. nur musst du noch die variable jeweils an den Anker übergeben .. ka vieleicht etwa so #+var
Vieleicht hilfts dir ja weiter.
Javascript: 
<!DOCTYPE html>
<html>
<head>
<script>
function scrolling()
{
var Anker=document.getElementById("fname");
$.scrollTo( '#target', 800, {easing:'elasout'} );
}
</script>
</head>
<body>

Suche: <input type="text" id="fname" onchange="scrolling()" />
<p>A function is triggered when the input field is changed.</p>
<p>Write some text in the input field, and the click outside the input field to run the function.</p>

</body>
</html>
http://demos.flesler.com/jquery/scrollTo/

Gruß Joe.
 
Zuletzt bearbeitet von einem Moderator:
In diesem Beispiel wird die jeweilige Eingabe mit den IDs verglichen die bei den DIV-Containern angegeben sind. Wird ein passender Eintrag gefunden, wird zu der Stelle gescrollt.

HTML: 
<script language="javascript" type="text/javascript">
function check(eingabe){
a = 0;

if (eingabe.length == 0) return;

while (document.getElementsByTagName("div")[a]){
	id = document.getElementsByTagName("div")[a].getAttribute("id");
	if (id.slice(0, eingabe.length) == eingabe){
		document.getElementById(id).scrollIntoView(true);
		return;
	}
	a++;
}

}
</script>
<input type="text" name="feld1" value="" size="20" maxlength="50" onkeyup="check(this.value);" />
<div id="111">111<br />111<br />111<br />111<br />111<br />111<br />111<br />111<br />111<br />111<br />111<br />111<br />111<br />111<br />111<br />111<br />111<br />111<br />111<br />111<br />111<br />111<br />111<br />111<br />111<br />111<br />111<br />111<br />111<br />111<br />111<br />111<br />111<br />111<br />111<br />111<br />111<br />111<br />111<br />111<br />111<br />111</div>
<div id="222">222<br />222<br />222<br />222<br />222<br />222<br />222<br />222<br />222<br />222<br />222<br />222<br />222<br />222<br />222<br />222<br />222<br />222<br />222<br />222<br />222<br />222<br />222<br />222<br />222<br />222<br />222<br />222<br />222<br />222<br />222<br />222<br />222<br />222<br />222<br />222<br />222<br />222<br />222<br />222<br />222<br />222</div>
<div id="223">223<br />223<br />223<br />223<br />223<br />223<br />223<br />223<br />223<br />223<br />223<br />223<br />223<br />223<br />223<br />223<br />223<br />223<br />223<br />223<br />223<br />223<br />223<br />223<br />223<br />223<br />223<br />223<br />223<br />223<br />223<br />223<br />223<br />223<br />223<br />223<br />223<br />223<br />223<br />223<br />223<br />223</div>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück