Solved

Drop down lists in Internet Explorer

Posted on 2004-10-27
190 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
Question by:RichardStarkey
    6 Comments
     
    LVL 5

    Expert Comment

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

    Accepted Solution

    by:
    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

    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
    You are welcome.
    0

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone. Privacy Policy Terms of Use

    Featured Post

    Find Ransomware Secrets With All-Source Analysis

    Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

    Suggested Solutions

    For users on the Lotus Notes 8 Standard client, this article provides information on checking the Java Heap size and adjusting it to half of your system RAM in attempt to get the Lotus Notes 8.x Standard client to run faster.  I've had to exercise t…
    Problem "Can you help me recover my changes?  I double-clicked the attachment, made changes, and then hit Save before closing it.  But when I try to re-open it, my changes are missing!"    Solution This solution opens the Outlook Secure Temp Fold…
    With the advent of Windows 10, Microsoft is pushing a Get Windows 10 icon into the notification area (system tray) of qualifying computers. There are many reasons for wanting to remove this icon. This two-part Experts Exchange video Micro Tutorial s…
    This video is in connection to the article "The case of a missing mobile phone (https://www.experts-exchange.com/articles/28474/The-Case-of-a-Missing-Mobile-Phone.html)". It will help one to understand clearly the steps to track a lost android phone.

    875 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

    Need Help in Real-Time?

    Connect with top rated Experts

    12 Experts available now in Live!

    Get 1:1 Help Now