Drop down lists in Internet Explorer


Hello,
Does anybody know of a neat solution for searching through drop down (dialog) lists in Internet Explorer.  By default you can search on the first character only.  Ideally I'd like to mimic the functionality in Notes wherein I can keep typing into the field and it will pull in the best match automatically.  Failing that I'd like to get the users to enter their search term and then populate the drop down list dependent on what has been entered.

Any suggestions!?
RichardStarkeyAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

steve_bagnallCommented:
Hi,

It would probably be possible to emulate the Notes functionality, but it would probably be slow as you would have to run a script on every key press.  The following JavaScript code modifies the options in a select element based on the value in a text field.  It makes no distinction as to whether it finds the phrase at the front of the option text, or anywhere within it, this may be better for you or you can change the regular expression to make this happen.  Also, no attempt is made to store the original contents of the options array so these are lost between page refreshes as soon as the button is pressed.

For this example to work the name of the select field needs to be "select1" and the name of the text field needs to be "search".  This script needs to be placed in the JSHeader section of the form you whish it to work on, and button formula that the user presses after typing in the search criteria needs to be JavaScript (obviously) and it should call the following:  

refineOptions();

If you want me to explain how to modify the regular expressions, or if you would like me to go into any more detail on anything else, let me know.

Cheers, Steve


function refineOptions() {
      var undefined;

      var searchValue = forms[0].elements.all.search.value;
      var searchString = new RegExp(searchValue)

      var selectObject = forms[0].elements.all.select1;
      var selectLength = selectObject.options.length

      var matchedValues= new Array();
      var matchedText= new Array();
      var matchedIndex = 0;

      for (i = 0; i < selectObject.options.length; i++) {
            var optionText = forms[0].elements.all.select1.options[i].text;
            var optionValue = forms[0].elements.all.select1.options[i].value;
            if (optionText.match(searchString)) {
      
                  matchedValues[matchedIndex] = optionValue;
                  matchedText[matchedIndex] = optionText;
                  matchedIndex++;
            }
      }



      for (j = 0; j < selectLength; j++) {

            selectObject.options[j] = null;

      }

      for (k = 0; k < matchedIndex; k++) {

            selectObject.options[k].value = matchedValues[k];
            selectObject.options[k].text = matchedText[k];

      }


}
0
ZvonkoSystems architectCommented:
Here my version.

Assign to the DialogList field onKeyDown event handler this JavaScript line:
return findOpt(this, event)

And in the JSHeader section put this function:

function findOpt(theSel, e){
  keyCode = (e.keyCode)? e.keyCode: e.which;
  keyChar = String.fromCharCode(keyCode).toLowerCase();
  window.status = keyChar;
  if(typeof theSel.searchStr=="undefined") {
    theSel.searchStr = "";
  }
  if((/[a-z0-9\ ]/i).test(keyChar)){
    searchStr = theSel.searchStr += keyChar;
    window.status = "Search: "+searchStr;
    opt = theSel.options;
    for(var i=0;i<opt.length;i++){
      if(opt[i].text.toLowerCase().indexOf(searchStr)==0){
        opt[i].selected = true;
        return false;
      }
    }
  }
  theSel.searchStr = "";
  window.status = "";
  return true;
}

When your DialogList field get focus you can type characters.
As long as the character sequence finds a match in the options you will see the option selected and the window stataus bar has the complete search string.
As soon as first key is not found in the options is the search string reset to empty string.
Doing so you can enter at any point the Escape key and start the search string from scratch.

0
steve_bagnallCommented:
Cool :)  Richard use Zvonko's solution!

Now I have a question: are you just attaching an arbitary property to the "theSel" object in the lines:

if(typeof theSel.searchStr=="undefined") {
    theSel.searchStr = "";
}

Cheers, Steve



0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

ZvonkoSystems architectCommented:
Yea. I create a new property on the fly. Macrmedia does the same for their scripts too.

By the way, the script working for IE and Netscape goes like this:

function findOpt(theSel, e){
  keyCode = (e.keyCode)? e.keyCode: e.which;
  keyChar = String.fromCharCode(keyCode).toLowerCase();
  window.status = keyChar;
  searchStr = theSel.getAttribute("searchStr");
  if(typeof searchStr=="undefined") {
    searchStr = "";
  }
  if((/[a-z0-9\ ]/i).test(keyChar)){
    searchStr += keyChar;
    window.status = "Search: "+searchStr;
    opt = theSel.options;
    for(var i=0;i<opt.length;i++){
      if(opt[i].text.toLowerCase().indexOf(searchStr)==0){
        theSel.setAttribute("searchStr", searchStr);
        opt[i].selected = true;
        return false;
      }
    }
  }
  theSel.setAttribute("searchStr", "");
  window.status = "";
  return true;
}



0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
RichardStarkeyAuthor Commented:

Wow.
Thanks to the pair of you for helping me with this and thanks for that code Zvonko.  It is exactly what I want!
0
ZvonkoSystems architectCommented:
You are welcome.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Lotus IBM

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.