?
Solved

Filtering a listbox

Posted on 2003-03-07
11
Medium Priority
?
702 Views
Last Modified: 2009-09-26
I have this code which filters a listbox
form a textbox.

<HTML>
<HEAD>
    <TITLE>JavaScript Toolbox - Auto-Complete</TITLE>
<script>
function autoComplete (field, select, property, forcematch) {
    var found = false;
    for (var i = 0; i < select.options.length; i++) {
    if (select.options[i][property].toUpperCase().indexOf(field.value.toUpperCase()) == 0) {
         found=true; break;
         }
    }
    if (found) { select.selectedIndex = i; }
    else { select.selectedIndex = -1; }
    if (field.createTextRange) {
         if (forcematch && !found) {
              field.value=field.value.substring(0,field.value.length-1);
              return;
              }
         var cursorKeys ="8;46;37;38;39;40;33;34;35;36;45;";
         if (cursorKeys.indexOf(event.keyCode+";") == -1) {
              var r1 = field.createTextRange();
              var oldValue = r1.text;
              var newValue = found ? select.options[i][property] : oldValue;
              if (newValue != field.value) {
                   field.value = newValue;
                   var rNew = field.createTextRange();
                   rNew.moveStart('character', oldValue.length) ;
                   rNew.select();
                   }
              }
         }
    }

</script>
</HEAD>
<BODY BGCOLOR=#FFFFFF LINK="#00615F" VLINK="#00615F" ALINK="#00615F">
<FORM>

<B>Auto-Complete</B><BR>
Start typing a name in the input box that matches a name in the drop-down...<BR>
<INPUT TYPE="text" NAME="input1" VALUE="" ONKEYUP="autoComplete(this,this.form.options,'value',true)">
<SELECT NAME="options"
onChange="this.form.input1.value=this.options[this.selectedIndex].value">
    <OPTION VALUE="adam">adam
    <OPTION VALUE="george">george
    <OPTION VALUE="matt">matt
    <OPTION VALUE="bill">bill
    <OPTION VALUE="greg">greg
    <OPTION VALUE="bob">bob
    <OPTION VALUE="david">david
    <OPTION VALUE="ryan">ryan
</SELECT>

</FORM>

</BODY>
</HTML>



can anyone help me with this ?
how easy it is to filter the results at the listbox in order to hide all the other values (exaple: when i press "g") and display only the values starts with G.

thnx
0
Comment
Question by:espn78
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
11 Comments
 
LVL 63

Expert Comment

by:Zvonko
ID: 8089212
How about this:


<HTML>
<HEAD>
   <TITLE>JavaScript Toolbox - Auto-Complete</TITLE>
<script>
function autoComplete (field, select, property, forcematch) {
   var found = false;
   for (i = select.options.length - 1; i > -1; i--) {
     if (select.options[i][property].toUpperCase().indexOf(field.value.toUpperCase()) == 0)
        found=true;
      else
        select.options[i]=null;
   }
   if (found) { select.selectedIndex = 0; }
   else { select.selectedIndex = -1;
     select.options.length=selOpts.length;
     for(i=0;i<selOpts.length;i++)
       select.options[i]=new Option(selOpts[i][0], selOpts[i][1]);
   }
   if (field.createTextRange) {
        if (forcematch && !found) {
             field.value=field.value.substring(0,field.value.length-1);
             return;
             }
        var cursorKeys ="8;46;37;38;39;40;33;34;35;36;45;";
        if (cursorKeys.indexOf(event.keyCode+";") == -1) {
             var r1 = field.createTextRange();
             var oldValue = r1.text;
             var newValue = found ? select.options[0][property] : oldValue;
             if (newValue != field.value) {
                  field.value = newValue;
                  var rNew = field.createTextRange();
                  rNew.moveStart('character', oldValue.length) ;
                  rNew.select();
                  }
             }
        }
   }
var selOpts = new Array();
function initSel(theSel){
 for(i=0;i<theSel.options.length;i++)
  selOpts[i]=[theSel.options[i].value,theSel.options[i].text];
}
</script>
</HEAD>
<BODY BGCOLOR=#FFFFFF LINK="#00615F" VLINK="#00615F" ALINK="#00615F" onLoad="initSel(document.forms[0].options)">
<FORM>

<B>Auto-Complete</B><BR>
Start typing a name in the input box that matches a name in the drop-down...<BR>
<INPUT TYPE="text" NAME="input1" VALUE="" ONKEYUP="autoComplete(this,this.form.options,'value',true)">
<SELECT NAME="options"
onChange="this.form.input1.value=this.options[this.selectedIndex].value">
   <OPTION VALUE="adam">adam
   <OPTION VALUE="george">george
   <OPTION VALUE="matt">matt
   <OPTION VALUE="bill">bill
   <OPTION VALUE="greg">greg
   <OPTION VALUE="bob">bob
   <OPTION VALUE="david">david
   <OPTION VALUE="ryan">ryan
</SELECT>

</FORM>

</BODY>
</HTML>


0
 
LVL 5

Expert Comment

by:cirtap
ID: 8089339
nice idea :-)

I guess the textRange stuff does not work in either NS6 nor MSIE. However, I changed your code a bit (see text below).

<HTML>
<HEAD>
<TITLE>JavaScript Toolbox - Auto-Complete</TITLE>
<script>
function autoComplete (field, oSel, property, forcematch) {
   var found = -1;
   for (var i = 0; i < oSel.options.length; i++) {
     if (oSel.options[i][property].toUpperCase().indexOf(field.value.toUpperCase()) == 0) {
        oSel.options[i].style.display="";
        if (found == -1) found=i;
     } else {
        oSel.options[i].style.display="none";
     }
   }
   if (found>=0) { oSel.options[found].selected=true; }
// little debugger, see DIV below
if (found>=0) document.getElementById("dbg").innerHTML='i:'+i+", found:"+found+", prop:"+property
}
</script>
</HEAD>
<BODY BGCOLOR=#FFFFFF LINK="#00615F" VLINK="#00615F" ALINK="#00615F">
<FORM>
<B>Auto-Complete</B><BR>
Start typing a name in the input box that matches a name in the drop-down...<BR>
<INPUT TYPE="text" NAME="input1" VALUE="" ONKEYUP="autoComplete(this,this.form.selOptions,'value',true)">
<SELECT NAME="selOptions"
onChange="this.form.input1.value=this.options[this.selectedIndex].value">
   <OPTION VALUE="adam">adam
   <OPTION VALUE="george">george
   <OPTION VALUE="matt">matt
   <OPTION VALUE="bill">bill
   <OPTION VALUE="greg">greg
   <OPTION VALUE="bob">bob
   <OPTION VALUE="david">david
   <OPTION VALUE="ryan">ryan
   <OPTION VALUE="geoffrey">geoffrey
</SELECT>
</FORM>
<div id="dbg"></div>
</BODY>
</HTML>

1. renamed a couple of your variables and HTML elements, using "options" may conflict with the existing .options property of a select list, also "select" is a bad name for a select list as there's a select() method and so on.
Avoid such "common" names, they're often the reason for some code not to work as expected, expect the programmers of a browser to came up with that idea before :-) that's why we have window.document and not thebrowserbox.thestuffinside

I also added "geoffrey" to the name list to habe twe starting with "geo" (don't know if the name's spelled correctly)

What happens:
found will contain the item no. of the option that matched first and only the first will be taken. It'll be the selected on in the list afterward. NO BREAK here.
the for() loop hides all options that don't match and keeps the otheres visible, this way visually reducing the available entries to those starting with the letters entered so far.

I removed the createRange part as I don't think this will work as intended - at least it didn't seem to do anything here. instead the first matching option will be selected.

Drawback: MSIE5.5 and Opera7 did not "hide" the options, whereas Mozilla did. Maybe MSIE6 will do it as well if goven a DOCTYPE XHTML, I don't have IE6 here.

CirTap
0
 
LVL 5

Expert Comment

by:cirtap
ID: 8089383
hmm. should have reloaded the question before posting :-)
now I finally see what the range's supposed to do.
It does not "restore" the List when I type back, eg. change "geo" to "ge", there's only george left in the list. The full list only reappears when I emtpy the textbox.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:espn78
ID: 8110635
i see it's difficult that way

ok, let's make it easier.
forget the auto-complete..

how hard it is to be built with a submit button ?
for exaple I type 1 or 2 chars in the textbox and then submit the value in order to filter the listbox with the right results.

0
 

Author Comment

by:espn78
ID: 8110639
i see it's difficult that way

ok, let's make it easier.
forget the auto-complete..

how hard it is to be built with a submit button ?
for exaple I type 1 or 2 chars in the textbox and then submit the value in order to filter the listbox with the right results.

0
 

Author Comment

by:espn78
ID: 8110689
i see it's difficult that way

ok, let's make it easier.
forget the auto-complete..

how hard it is to be built with a submit button ?
for exaple I type 1 or 2 chars in the textbox and then submit the value in order to filter the listbox with the right results.

0
 

Author Comment

by:espn78
ID: 8110698
..but if the value don't not exist the list box will return the latest previous one..
0
 

Author Comment

by:espn78
ID: 8111248
..but if the value don't not exist the list box will return the latest previous one..
0
 

Author Comment

by:espn78
ID: 8111733
..but if the value don't not exist the list box will return the latest previous one..
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 10098295
No comment has been added lately, so it's time to clean up this TA.
I will leave the following recommendation for this question in the Cleanup topic area:

PAQ with points refunded

Please leave any comments here within the next seven days.
PLEASE DO NOT ACCEPT THIS COMMENT AS AN ANSWER!

jAy
EE Cleanup Volunteer
0
 
LVL 1

Accepted Solution

by:
Computer101 earned 0 total points
ID: 10148599
PAQed, with points refunded (75)

Computer101
E-E Admin
0

Featured Post

Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question