CODEWITHSUNDEEP
javascriptasp.netlistbox
Tom
Tom

Reputation: 1057

Set the scroll position of a listbox

I have a multiple select listbox. This listbox contains the names of many entities. Around 1000+. So as you can see it would be very annoying to scroll through. What I want to do is to display A-Z on the side vertically. When the user clicks a letter, javascript is fired to set the scroll position (NOT select the item) of the first occurring character selected. This is a control that is being created in c# and javascript being rendered using the client script manager. Basically what I have done so far is to add a new htmlanchor from a char array A-Z. This lists the alphabet vertically. This would be very similar to an iTouch/iPhone music library, touch/click the letter and the scroll is set to the first occurrence. I know how to loop through the list. So far I have an onclick function that acts as such:

private HtmlGenericControl alphaSortContainer;
this.alphaSortContainer = new HtmlGenericControl("div");
char[] alphabet = { 'Z'.......'A' };
for (int i = 0; i < 26; i++)
{
    var letter = new HtmlAnchor();
    link.InnerText = alphabet[i].ToString();
    link.Attributes.Add("onclick", "javascript:jumpToIndex('" + link.InnerText + "');");
    alphaSortContainer.Controls.Add(letter);
}

The above code adds (or should) letters stacked on top of each other. Their onclick will fire the javascript function and send in the letter.

My javascript so far:

function jumpToIndex(var index) {
    var list = document.getElementByID('" + this.list.ClientID + "');
    for(var i=0; i < list.length; i++) {
        if(list.options[i].value.charAt(0) == index) {
          HOW TO SET THE SCROLL POSITION TO MAKE THAT OBJECT THE TOP OF THE LIST BOX
          break; //pretty sure this is how i would break out of both loops.
        }
    }
}

I just need to scroll to the item that matches the if statement. Also, i am pretty sure that would be how I break out of both loops. Please help!

Upvotes: 1

Views: 6049

Answers (2)

derekcohen
derekcohen

Reputation: 1514

Have you considered not displaying the whole list but having javascript arrays for each letter. When a letter is selected the list is populated with just that letter's items?

var alphalist=new Array();
alphalist['a']=new Array('aardvark','acorns','apples');
alphalist['b']=new Array('baby','barley');
//etc
 function fill_list{selectedLetter){
  listItems=alphalist[selectedLetter];
  mylist=document.getElementById('mylist');
  mylist.length=0;.length=0;
  for(var i=0;i<listItems.length;i++){
    optionName = new Option(listItems[i],listItems[i])
    var length = mylist.length;
    mylist.options[length] = optionName;
  }
}

Upvotes: 0

Martin Jespersen
Martin Jespersen

Reputation: 26183

The only way to do this is to select one of the options in the select list, which you can do the following way:

<select id="myselect">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3" selected="selected">3</option>
  <option value="4">4</option>
</select>

Of course, if you don't want to make this choice serverside when you build the list or if you build the list clientside, you can always do it using javascript like this:

document.getElementById('myselect').options[<insert number>].selected = true;

and remember that <insert number> is zerobased

Now before you say i don't want to select it, just scroll to it, remember that if you see an option in a listbox, it is already selected by default.

Unless you are working with a multi-select selectbox in which case this is a whole different ballgame, and you are shit out of luck ;)

Upvotes: 1

Related Questions