Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Drop down lists in Internet Explorer

Posted on 2004-10-27
6
Medium Priority
?
191 Views
Last Modified: 2013-12-18

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!?
0
Comment
Question by:RichardStarkey
[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
  • 3
  • 2
6 Comments
 
LVL 5

Expert Comment

by:steve_bagnall
ID: 12432572
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 12432905
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
 
LVL 5

Expert Comment

by:steve_bagnall
ID: 12433231
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
Industry Leaders: 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!

 
LVL 63

Accepted Solution

by:
Zvonko earned 1400 total points
ID: 12433332
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
 

Author Comment

by:RichardStarkey
ID: 12468956

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
 
LVL 63

Expert Comment

by:Zvonko
ID: 12468980
You are welcome.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Lack of Storage capacity is a common problem that exists in every field of life. Here we are taking the case of Lotus Notes Emails, as we all know that we are totally depend on e-communication i.e. Emails. This article is fully dedicated to resolvin…
Sometimes clients can lose connectivity with the Lotus Notes Domino Server, but there's not always an obvious answer as to why it happens.   Read this article to follow one of the first experiences I had with Lotus Notes on a client's machine, my…
This course is ideal for IT System Administrators working with VMware vSphere and its associated products in their company infrastructure. This course teaches you how to install and maintain this virtualization technology to store data, prevent vuln…
In this video, Percona Solution Engineer Dimitri Vanoverbeke discusses why you want to use at least three nodes in a database cluster. To discuss how Percona Consulting can help with your design and architecture needs for your database and infras…

636 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