Put selection on top of the current select box

@jt107Mar 31.2010

Is there anyway I could control the selected item, and put it on the top of the current selection box. I know for the first and last 4 item, it may not be able to show on the top of the select box. But if I have hundreds of record, I want the selected item to show on the top if they not the first or last 4. And I am not interested in the items before the selected item either. Could anyone help? Thanks.

I have the testing code below.
<HTML><HEAD><SCRIPT type=”text/javascript”>
function searchSel() {
var input=document.getElementById(‘txt’).value.toLowerCase();
var list=document.getElementById(‘items’).options;
for(var i=0;i<list.length;i++) {
if(list~~[i]~~.value.indexOf(input)==0)
{
list~~[i]~~.selected=true;
break;
}
}
}
</SCRIPT></HEAD><BODY>
<FORM id=”myform” name=”myform”>
Search <input type=”text” id=”txt” onkeyup=”searchSel()”><br />
<SELECT id=”items” size=”5″>
<OPTION value=”abcd”>abcd
<OPTION value=”abdc”>abdc
<OPTION value=”abcd”>abcd
<OPTION value=”bacd”>bacd
<OPTION value=”badc”>badc
<OPTION value=”bcda”>bcda
<OPTION value=”bcdc”>bcdc
<OPTION value=”cdef”>cdef
<OPTION value=”cdfe”>cdfe
<OPTION value=”cfde”>cfde
<OPTION value=”cfed”>cfed
<OPTION value=”defg”>defg
<OPTION value=”degf”>degf
<OPTION value=”degg”>degg
<OPTION value=”deff”>deff
</SELECT>
</FORM></BODY></HTML>

to post a comment

JavaScript

9 Comments(s) _↴

@tirnaApr 01.2010 — #I'm not sure I fully understand what you want, but the code below will display only the options with text starting with what the user enters in the text box on every 'key up'.

The user can then select from one of the new options being displayed.

This should be close to what you want.

note - in your original code you have several options with exactly the same value and text. I assume that is a copy and paste error, but I left them as they are.

[code=php] 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title></title>
 <script type="text/javascript">
 <!--
 var optList;
 var optsValue = new Array();
 var optsText = new Array();
 
 //when the page loads get the original options values and text and store them in arrays
 window.onload = function() {
 optList = document.getElementsByTagName("option");
 for(var i=0; i<optList.length; i++) {
 optsValue[i] = optList[i].value;
 optsText[i] = optList[i].text; 

 } 

 }
 
 function searchSel(txtSearch) {
 //clear all the current options
 document.getElementById("items").options.length = 0;
 
 var count = 0;
 for(var i=0; i < optsValue.length; i=i+1) {
 if(optsText[i].indexOf(txtSearch) == 0) {  //match found
 //add this option to the select list options
 var newOpt = new Option(optsValue[i],optsText[i],false,false);
 document.getElementById("items").options[count] = newOpt;
 count = count+1;
 }
 } 
 }
 //-->
 </script>
 </head>
 <body>
 
 <FORM id="myform" name="myform">
 Search <input type="text" id="txt" onkeyup="searchSel(this.value);"><br />
 
 <SELECT id="items" size="5">
 <option value="abcd">abcd</option>
 <option value="abdc">abdc</option>
 <option value="abcd">abcd</option>
 <option value="bacd">bacd</option>
 <option value="badc">badc</option>
 <option value="bcda">bcda</option>
 <option value="bcdc">bcdc</option>
 <option value="cdef">cdef</option>
 <option value="cdfe">cdfe</option>
 <option value="cfde">cfde</option>
 <option value="cfed">cfed</option>
 <option value="defg">defg</option>
 <option value="degf">degf</option>
 <option value="degg">degg</option>
 <option value="deff">deff</option>
 </SELECT>
 
 </FORM>
 </body>
 </html>
 
 [/code]

@jt107authorApr 01.2010 — #Thanks for your response Tirna. Appreciate your solution.

What I am looking for is somehow remove/hide the items before selected item in the dropdown list, so selected item will be the first one one the list, and the rest items keep its order following the selected item. That is it.

@tirnaApr 01.2010 — #ok ?, then I don't understand the purpose of the onkeyup event handler in the textbox which is where you call searchSel();

If the user simply scrolls down the select list and selects an option (after which the options are redisplayed with the selected option at the top) and doesn't touch the textbox, then searchSel() will never be called as far as I can see.

@tirnaApr 01.2010 — #To get what you want, you only need a minor modification to the code I gave you.

1) At the moment, as soon as the user type the letter b in the text box the 4 options beginning with b will be displayed in the select list.

2) Add code that checks when there is only one option being displayed as the user types more letters in the textbox.

3) Then set the 'selected' attribute for that option to = selected.

4) Display the remaining options from index = the current value of count +1 to the last index in optsValue. The values for the value and text for the remaining options are stored in the optsValue and optsText arrays.

@jt107authorApr 01.2010 — #Thanks Tirna, it is ok when user selects from the dropdown list, the selsearch() only called when user typing an input. And if user enters an input then the selection will be the first in the displayed list(if possible), only the ones before the selected item be hidden, the rest should be same as the original list.

Appreciate your help.

JT

@jt107authorApr 01.2010 — #I'm not sure I fully understand what you want, but the code below will display only the options with text starting with what the user enters in the text box on every 'key up'.

The user can then select from one of the new options being displayed.

This should be close to what you want.

note - in your original code you have several options with exactly the same value and text. I assume that is a copy and paste error, but I left them as they are.

[code=php] 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title></title>
 <script type="text/javascript">
 <!--
 var optList;
 var optsValue = new Array();
 var optsText = new Array();
 
 //when the page loads get the original options values and text and store them in arrays
 window.onload = function() {
 optList = document.getElementsByTagName("option");
 for(var i=0; i<optList.length; i++) {
 optsValue[i] = optList[i].value;
 optsText[i] = optList[i].text; 

 } 

 }
 
 function searchSel(txtSearch) {
 //clear all the current options
 document.getElementById("items").options.length = 0;
 
 var count = 0;
 for(var i=0; i < optsValue.length; i=i+1) {
 if(optsText[i].indexOf(txtSearch) == 0) {  //match found
 //add this option to the select list options
 var newOpt = new Option(optsValue[i],optsText[i],false,false);
 document.getElementById("items").options[count] = newOpt;
 count = count+1;
 }
 } 
 }
 //-->
 </script>
 </head>
 <body>
 
 <FORM id="myform" name="myform">
 Search <input type="text" id="txt" onkeyup="searchSel(this.value);"><br />
 
 <SELECT id="items" size="5">
 <option value="abcd">abcd</option>
 <option value="abdc">abdc</option>
 <option value="abcd">abcd</option>
 <option value="bacd">bacd</option>
 <option value="badc">badc</option>
 <option value="bcda">bcda</option>
 <option value="bcdc">bcdc</option>
 <option value="cdef">cdef</option>
 <option value="cdfe">cdfe</option>
 <option value="cfde">cfde</option>
 <option value="cfed">cfed</option>
 <option value="defg">defg</option>
 <option value="degf">degf</option>
 <option value="degg">degg</option>
 <option value="deff">deff</option>
 </SELECT>
 
 </FORM>
 </body>
 </html>
 
 [/code]

[/QUOTE]

Actually this is a good solution. Thank you very much Tirna.

@KorApr 01.2010 — #Is this what you want?

<i>
 </i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Untitled Document&lt;/title&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
 &lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
 &lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
 &lt;script type="text/javascript"&gt;
 function searchOpt(sel,v){
 var opt=sel.options, o, i=0, r=new RegExp(v,'i'), val=false;
 while(o=opt[i++]){
 if(o.value.search(r)==0){
 val=o.value;break
 }
 }
 if(!val){return}
 moveOpt(sel,val);
 }
 function moveOpt(sel,val){
 var opt=sel.options, o, selOpt=null, i=0;
 while(o=opt[i++]){
 o.removeAttribute('selected');
 o.value==val?selOpt=o:null;
 }
 selOpt?sel.insertBefore(selOpt,opt[0]):selOpt=opt[0];
 setTimeout(function(){selOpt.setAttribute('selected','selected')},50); // setTimeout = hack for IE bug
 }
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;form action=""&gt;
 Search &lt;input type="text" id="txt" onkeyup="searchOpt(items,this.value)" onblur="searchOpt(items,this.value)"&gt;
 &lt;br&gt;
 &lt;select id="items" name="items" size="5" onchange="moveOpt(this,this.value)"&gt;
 &lt;option value="abcd"&gt;abcd&lt;/option&gt;
 &lt;option value="abdc"&gt;abdc&lt;/option&gt;
 &lt;option value="bacd"&gt;bacd&lt;/option&gt;
 &lt;option value="badc"&gt;badc&lt;/option&gt;
 &lt;option value="bcda"&gt;bcda&lt;/option&gt;
 &lt;option value="bcdc"&gt;bcdc&lt;/option&gt;
 &lt;option value="cdef"&gt;cdef&lt;/option&gt;
 &lt;option value="cdfe"&gt;cdfe&lt;/option&gt;
 &lt;option value="cfde"&gt;cfde&lt;/option&gt;
 &lt;option value="cfed"&gt;cfed&lt;/option&gt;
 &lt;option value="defg"&gt;defg&lt;/option&gt;
 &lt;option value="degf"&gt;degf&lt;/option&gt;
 &lt;option value="degg"&gt;degg&lt;/option&gt;
 &lt;option value="deff"&gt;deff&lt;/option&gt;
 &lt;/select&gt; 
 &lt;/form&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@jt107authorApr 01.2010 — #Thanks Kor. Your solution did bring the select item to the top of the list, however, the list is re-ordered. I would like to keep the oringinal order, except hide those items that listed before the selected items.

Appreciate your help.

@tirnaApr 01.2010 — #Actually this is a good solution. Thank you very much Tirna.[/quote]

No problem - I'm glad you got what you needed.

Happy Easter ?

Also in #JavaScript _↴

GOOGLE Challenge :)how to determine if dom element exists...?Javascript problem with Firefox 3.0.6

Success!

Help @jt107 spread the word by sharing this article on Twitter...

Tweet This

Put selection on top of the current select box

9 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Put selection on top of the current select box

9 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

9 Comments(s) _↴

Also in #JavaScript _↴