Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Shaun E on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

textbox navigation of list of links 2

Status
Not open for further replies.
hererxnl

hererxnl

Technical User
Jul 8, 2003
239
US

I've been porting a vb app to a web app and have run up against a wall. Hopefully someone can help me out.

My vb app supplies a long (2500+) list of items to the user with a textbox right above the list. The user will type in a word, and the list will scroll to the closest match according to the user's input.

Any idea how I could accomplish the same result with a long list of links (at the moment seperated by a <br> tag)and a textbox? Javascript would seem to be the answer, but it's not my specialty and I can't seem to find another thread here (or elsewhere for that matter) that does anything similiar to this.

Any help is greatly appreciate, thanks in advance.
 
Sort by date Sort by votes

Dan:

Thanks for the response. Is there a way to use <select> that doesn't confine the <option>s to a list element?

Here's a really rough ascii example of what I'm trying to achieve:

-------------
| textbox |
-------------

<a href="whatever">a</a><br>
<a href="whatever">ab</a><br>
<a href="whatever">ac</a><br>
<a href="whatever">ba</a><br>
<a href="whatever">bb</a><br>
<a href="whatever">bc</a><br>

Where user input in the textbox will jump to the first matching link on the page.

Hope this is more clear. The standard <select> element will destroy the look of the page. Thanks again, there are star(s) available to anyone who can point me in the right direction :)
 
Upvote 0 Downvote
something like this?

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]

<html>
<head>
<title>Untitled</title>
<script type="text/javascript"><!--
function go(v) {
    var d = document.getElementById("main");
    var a = d.getElementsByTagName("a");
    for ( var i = 0; i < a.length; i++ ) {
        if ( a[i].innerHTML.toUpperCase() == v.toUpperCase() ) {
            a[i].scrollIntoView();
            return;
        }
    }
}
//--></script>
</head>

<body>

<div id="main">
<form name="f"><input type="text" name="t" /><input type="button" value="go!" onclick="go(this.form.t.value);" /></form>
<a href="#">Part One</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a href="#">Part Two</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a href="#">Part Three</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a href="#">Part Four</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>

</body>
</html>



*cLFlaVA
----------------------------
[tt]somebody set up us the bomb![bomb][/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
I had this 1/2 typed out and then got sidetracked, but I'll go ahead and post it anyway:

Here's a stab at it hererxnl:
Code: 
<script type="text/javascript">

function jumpToLink(str) {
   var linkList = document.getElementsByTagName("a");
   for (i = 0; i < linkList.length; i++) {
      if (linkList[i].innerHTML.substr(0, str.length) == str) {
         linkList[i].focus();
         break;
      }
   }
}

</script>

<body>
<input type="text" onkeyup="jumpToLink(this.value)" /><br />
<a href="whatever">a</a><br>
<a href="whatever">ab</a><br>
<a href="whatever">ac</a><br>
<a href="whatever">ba</a><br>
<a href="whatever">bb</a><br>
<a href="whatever">bc</a><br>
</body>

However, take this into consideration:

When you are typing in the box and you get a match (for this example we'll use "a"). As soon as you type "a" into the box it jumps down to the first link labeled a and the textbox loses focus, so you'll never get a match for "ab" unless you click back on the textbox and continue typing.

-kaht

Looking for a puppy?

silky-icon-left.gif
[small]Silky Terriers are small, relatively odorless dogs that shed no fur and make great indoor pets.[/small]
silky-icon-right.gif
 
Upvote 0 Downvote

"take this into consideration", ah the perils of porting.

I'm going to try both and be back. thanks for the suggestions.

 
Upvote 0 Downvote

cory: your solution requires an exact string match, which will be a stretch for the users

kaht: I see what you're saying, but... your solution is really close to what I had in mind. I'm going to continue playing with this based on your answer.

I was contemplating using a floating script for the textbox so I don't have to use frames. I figure if they are going to use the textbox at all, JS has to be enabled anyway, so why not take full advantage of the language.

This being the case, maybe the function can reassign focus to the textbox without jumping back to the top of the page. I'll give it a go.

Thank you both.

 
Upvote 0 Downvote

Sorry to bother you guys on this again.

My beta works perfectly but live data is posing a problem. The list of links is generated dynamically with classic ASP and JavaScript doesn't seem to "see" the values. If I hard code some links (as I did with my test) it works, but nothing happens with live, dynamic data.

I'm sure there's a simple answer (even if it's not what I want to hear) but my JS ignorance is kicking in here...

???Help Please???
 
Upvote 0 Downvote

I may have discovered the problem. In trying to simplify my code for the purpose of a clear explanation I may have muddy the waters. I'm using a CSS span tag to surround my links' text to hide the underbar. I've changed kaht's code from above to look for the tag "span" instead of "a" to no avail. Here's my asp.

I'm using FSO to recursively loop through a series of directories each containing a number of files. This code then uses Response.Write (I'm sure you know this by looking at it) to produce the link for the browser.

Here's the example:
Code: 
For Each objFile in objRootFolder.Files
	
	Response.Write "<tr valign='top'><td><img src='images/file.gif'> </td><td><a href='ViewFile.asp?File=" & File.Name & "' title='View File...'><span class='splnk'>" & File.Name & "</span></a></td></tr>"
Next

Thanks for taking the time to look at this.
 
Upvote 0 Downvote
you're comparing innerHTML, which now includes a span. try this:

Code: 
if (linkList[i].getElementsByTagName("span")[0].innerHTML.substr(0, str.length) == str) {



*cLFlaVA
----------------------------
[tt]somebody set up us the bomb![bomb][/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote

You hit the nail on the head. Now I need to make the comparison non case sensitive and I've got a pretty Good Port.

Thanks for the help and checking a thread that already had a star (make that 2 stars).


 
Upvote 0 Downvote

If anyone else is interested here's the final function Im using:
Code: 
function jumpToLink(str) {
	var linkList = document.getElementsByTagName("a");
	for (i = 0; i < linkList.length; i++) {
		if (linkList[i].getElementsByTagName("span")[0].innerHTML.substr(0, str.length).toLowerCase() == str.toLowerCase()) {
			linkList[i].focus();
			break;
		}
	}
}
I've included .toLowerCase()in the string comparison to make it a bit more user friendly.

Many thanks to kaht & cLFlaVA for their help.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
2K
Mike Lewis
Mike Lewis
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
987
xwb
xwb
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
874
malpa
malpa
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
775
coldbohemia
coldbohemia
CrxC01
  • Locked
  • Question
Sum of All Primes
Replies
0
Views
265
CrxC01
CrxC01

Part and Inventory Search

Sponsor

Back
Top