Using Javascript to search a complicated select box?

richieboy

richieboy

richieboy

Associate
Joined
29 Dec 2004
Posts
2,253
I have a select box in my form with around 400 addresses. To make it easier for people to find the right address i'd like to give people a small input text box next to the select box that would allow the user to search for one of the addresses in the select box a lot quicker by searching for the persons name.

I've found a few scripts that do this, but the problem i have is the format my addresses are in and unfortunately i cannot change the format. Here's an example:

AAA - Mr Tester, Test Field, Testtown, etc.
AAA - Mr Aaron, Test Field, Testtown, etc.
AAA - Mr Aaronson, Test Field, Testtown, etc.
BBB - Mr John, Test Field, Testtown, etc.
BBB - Mr Hello, Test Field, Testtown, etc.
CCC - Mr Pilkington, Test Field, Testtown, etc.
CCC - Mr Mouse, Test Field, Testtown, etc.

With all the scripts i've found they search starting at the beginning of the string but not the entire string...so for example typing in B would find the addresses starting with BBB but what if want to search for "Pilkington" (which is what id actually want to search for)...
 
Here's an example of some code that does the job nicely (except doesn't use a textbox), but to be able to use you would have to type "CCC - Mr P" rather than "pilk" etc to get Mr Pilkington...can it be modified to search all of it...OR skip the first 5 charecters?

Code: 
<html>
<head>

<SCRIPT type=text/javascript>
// Java Script to Handle AutoSearch
function selectKeyDown()
{
    // Delete Key resets previous search keys
    if(window.event.keyCode == 46)
        clr();
}
function selectKeyPress()
{
    // Notes:
    //    1) previous keys are cleared onBlur/onFocus and with Delete key
    //    2) if the search doesn't find a match, this returns to normal 1 key search
    //        setting returnValue = false below for ALL cases will prevent
    //        default behavior
    
    //TODO:
    //    1) add Netscape handling
    

    var sndr = window.event.srcElement;
    var pre = this.document.all["keys"].value;
    var key = window.event.keyCode;
    var char = String.fromCharCode(key);

    var re = new RegExp("^" + pre + char, "i"); // "i" -> ignoreCase
    for(var i=0; i<sndr.options.length; i++)
    {
        if(re.test(sndr.options[i].text))
        {
            sndr.options[i].selected=true;
            document.all["keys"].value += char;
            window.event.returnValue = false;
            break;
        }
    }
}
function clr()
{
    document.all["keys"].value = "";
}
</SCRIPT>

</head>
<body>
<form>
<INPUT type=hidden name=keys> 
<select onkeypress=selectKeyPress(); onkeydown=selectKeyDown(); onblur=clr(); onfocus=clr(); id="address" name="address" size="1" style="width:600px;">
<option>AAA - Mr Tester, Test Field, Testtown, etc.</option>
<option>AAA - Mr Aaron, Test Field, Testtown, etc.</option>
<option>AAA - Mr Aaronson, Test Field, Testtown, etc.</option>
<option>BBB - Mr John, Test Field, Testtown, etc.</option>
<option>BBB - Mr Hello, Test Field, Testtown, etc.</option>
<option>CCC - Mr Pilkington, Test Field, Testtown, etc.</option>
<option>CCC - Mr Mouse, Test Field, Testtown, etc.</option>
</select>
</form>
</body>
</html>
 
Found this which works perfectly when i view my form directly, and im all sorted now.

Very useful if anyone is looking for something similar!
 
Last edited:
You must log in or register to reply here.
Back
Top Bottom