Scroll to text based on a input box value

[aHash]

Hello All,

I need to scroll to a particular last name in the list of last names based on the name typed in a input box. How can I do this in javscript?

 

[monksnake]

I need to scroll to a particular last name in the [!]list of last names[/!]

Where is the list of last names?
Are they in a textarea?
In a set of divs, one div per name?

Post some code please that makes up the structure of the list of last names, then we can see what to do from there.

<.

 

[aHash]

Thanks Monk. Here u go.

	<table cellspacing=0 cellpadding=0 border=0>
        <tr><td class="header">User Management</td></tr>
		<tr><td class="table_header">
	    	[COLOR=red]<a href="#A">A</a> | <a href="#B">B</a> | <a href="#C">C</a> | <a href="#D">D</a> | .... <a href="#X">X</a> | <a href="#Y">Y</a> | <a href="#Z">Z</a>	[/color]
	    </td></tr>
	    <tr><td><input name="last" type="text" size=25 maxlength=12 value="" onkeypress="checkEnter()" ></td></tr>
    </table>


	<div  id="mydiv" style="width:800px;height:1000px;overflow:scroll">
    <table cellspacing=0 cellpadding=0 border=0>
	<tr height=25><td></td></tr>
        <tr><td>
            <table cellspacing=0 cellpadding=0 border="0" class="table_frame" width=700>
                <tr class="table_header">
                    <td width=5></td>
                    <td class="table_header">User ID</td><td width=10></td>
                    <td class="table_header"></td><td width=10></td>
:
:
:
           <%
            	//iterate through all users after sorting by user name
                Iterator it = new SortIterator(allUsers.values().iterator(), new GenericComparator("getUserName", User.class));
                Iterator rowIt = new RowIterator();
                while (it.hasNext()) {
                    User user = (User) it.next(); 
                    Region defaultUserRegion = (Region) allRegion.get(user.getDefaultRegionID());                    
:
:
My processes here
:
:
                        </td><td width=10></td>
                        <td class="table_cell"><a href="javascript:createEditUser(<%=user.getUserID()%>)" class="std_link"><%=StringUtils.escapeHTML(user.getLogin())%></a></td><td width=10></td>
                        <td class="table_cell">[COLOR=red]<a name="<%=StringUtils.escapeHTML(user.getUserName()).substring(0,1).toUpperCase()%>"></a> [/color]<%=StringUtils.escapeHTML(user.getUserName())%></td><td width=10></td>

                        <td class="table_cell" align=center><%=(defaultUserRegion==null)?"":defaultUserRegion.getRegionKey()%></td><td width=10></td>
                        <td class="table_cell"><%=user.getDefaultStaffDivID()==null?"":user.getDefaultStaffDivID()%></td>
                        <td width=5></td>
                    </tr>

The idea is user will type in a last name and hit enter , then the page must scroll to the first occurance of that last name's first letter


==
PS excuse be if my formatting is a mess, cant do much in this small box provided here in Tek-tips.

 

[aHash]

Yes the list of name is one single DIV. That DIV has a table as you can see

 

[monksnake]

Here is a function I use that does exactly what you want:

   function findExcCode(str) {
      var reverseOrder = <%=((rev) ? 1 : 0)%>; 
      str = str.toUpperCase() + <%=((rev) ? '\"ZZZ\"' : '\"\"')%>;
      var notFound = true;
      a = 0;
      for (a = 0; a < codeArray.length - 1; a++) {
         if (str.replace("?", ".") <%=((rev) ? ">=" : "<=")%> codeArray[a].replace("?", ".")) {
            document.getElementById("excCodes").scrollTop = document.getElementById(codeIDArray[a]).offsetTop;
            a = codeArray.length;
            notFound = false;
         }
      }
      if (notFound) {
         document.getElementById("excCodes").scrollTop = document.getElementById(codeIDArray[a - 1]).offsetTop;
      }
   }

str is the current value of the text box.

This is the HTML with your text box:

<input name="last" type="text" size=25 maxlength=12 value="" onkeyup="findExcCode(this.value)"

You will have to disregard the reverse functionality.

As you can see in the function, I have 2 arrays that mirror each other, codeArray and codeIDArray. I needed 2 arrays cause some codes can be the same, so they would be invalid as ids.

You would need to give your anchors ids based off the last names of the content they have.

As you type in letters into the text box, the div will scroll down to the first anchor whose content (last name in your case) is less than or equal to the value of the text box.



<.

 

[aHash]

wow... Thanks.. let me try this get back to you!

 

[aHash]

Questions Monk,

After trying it, I don't understand few thing here.

How will 'rev' get evaluated? (1 or 0)

I am using Java objects (while Iterating I am using their methods to show the returned values, so in this case you have them in a javascript array(s) alredy!), I need to put them into Javascript Arrays? Am I correct? How can I do this?

 

[monksnake]

You need to remove any references to rev. That's for doing a search on the list reversed, which you don't need.

If you have it in an array already, just reference that array instead.

I'll admit I don't know anything about the Java (JSP??) you are putting in the code, but as long as you can reference the object user with .getUserName() as an array with an index, you can substitute that for the javascript array.


<.

 

[aHash]

OK .. Wish me luck ;-)
It is already 5 EST here.. Catch you tomorrow, if u are available.. (Homework time )

 

[monksnake]

Good luck.!!1.1!??

<.

 

[kaht]

Uh oh, he said the "H" word!!

-kaht

Looking for a puppy?

http://www.silkypups.com

[small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]

 

[monksnake]

Yeah I'm kinda lost on that one.

<.

 

[aHash]

Cool dear ones,
I got a fat Javascript book that I have at home, that I was refering..

ciao

 

[monksnake]

I see, after seeing you joined TT in the year 2000, I doubted that you were a student.

<.

 

[aHash]

But sadly never got into web programming very actively, except the past ten months or so. Book are there always, but you need a real motivation (or solvable problems )in your current project. I was in to MPE/IX for a long time... Finding my way through the Java forest (of course with all you guys help!)

I am working on a framework developed by my manager, though the Java part is somewhat manageable, still stuff that needs to UPDATED in the brain I guess..

Thanks guys it was fun.. Will get the killa morrw mornin