How can I search a drop-down list using JavaScript in IE

gecastill · #1 (**permalink**) May 26th, 2005, 12:44

Does any of you know how to create a drop-down list that allows the user to search the drop-down list using one and / or two characters, that is, if the user clicks or expands the drop-down list and then presses on two characters one after the other in the keyboard which could be the first two characters of the word they are searching for in the list.
This two characters will be save into a variable which will be compare to the first two letters of each word in the list; the first word in the list that matches to the first two characters will be selected in the list [similar to the one character search].

The one character search functionality already exist in the drop-down list so I need to add the two character search functionality to it. We are use to searching in a drop-down list using one character which matches to the first letter of a word in the list, that is, the first word in the list that has that letter.

Now, what I am looking for is to search with two characters; which will match with the first two letters of the words in the list in alphabetic order.
example:
if (wordInList.substring(0,2)==searchingString){
alert(DoThis);
}

They tell me that Firefox and Netscape 7.1+ have this feature built in.
Also I notice that WinZip has this feature built in too.
Other browsers can only search on the first letter of each option's text.

My users will be using Internet Explorer, how can I create this feature?
NOTE: I am not using Firefox, I am using Microsoft Internet Explorer 6.0.2... I need this functionality working in IE, because none of the users will be using Firefox. My users will be using Internet Explorer, how can I create this feature in IE?

The following drop-down list is working properly, but I need the search box to be part of the drop-down list. All the functionality should be in the drop-down list.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test 2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script type="text/javascript">
var selects = null;

function HandleKey() {
k = document.getElementById('searchbox');
keys = k.value;
if (keys.length > 0) {
FindKey(keys);
}
}

function FindKey(keys) {
// Returns a collection of objects with the specified element name.
opts = selects.getElementsByTagName('option');

for(i = 0; i < opts.length; i++) {
alert(i + ". option= " + opts.item(i).text + " searching= " + keys);
if (opts.item(i).text.substr(0, keys.length) == keys) {
// Select the option opts.item(i)
selects.selectedIndex = i;
return false;
}
}
}

function AttachSearch(id) {
// Returns a reference to the [select] element tag.
el = document.getElementById(id);

// Creates an instance of the element for the specified tag and returns a reference to the new element.
searchbox = document.createElement('input');
searchbox.id = 'searchbox';
searchbox.onkeypress = function() { setTimeout('HandleKey();', 10); };

// Returns a collection of objects with the specified element name.
selects = el.getElementsByTagName('select').item(0);

// Returns a reference to the element that is inserted into the document.
el.insertBefore(searchbox, selects);
}

window.onload = function() { AttachSearch('searchit'); }
</script>

<style type="text/css">
#searchbox
{
width: 35px;
}
</style>

<body>
<div id="searchit">
<select name="a">
<option>abb</option>
<option>abbc</option>
<option>abc</option>
<option>awahsdbg</option>
<option>baosiudgo</option>
<option>bwoaejisd</option>
<option>bzowej</option>
<option>caaijre</option>
<option>ckasdofj</option>
<option>coweruasdh</option>
<option>cxajre</option>
<option>dopriejo</option>
<option>dtaosjdfl</option>
<option>dypasj</option>
<option>eeaoijg</option>
<option>ezaosjdf</option>
<option>ezosjldkf</option>
</select>
</div>
</body>
</html>

===============================================

The following drop-down list has the look and feel I need, but the two character search in the drop-down list is not working properly.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test 3</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script type="text/javascript">
var fnd = "";
function findOption(selects, evt) {
if (window.event) var k = String.fromCharCode(event.keyCode);
else var k = String.fromCharCode(evt.which);
if (k < " " || k > "~") return true;
if (k == " ") fnd = "";
else fnd += k.toUpperCase();

for (var i = 0; i < selects.options.length; i++) {
var optText = selects.options[i].text.toUpperCase();
alert(i + ". option= " + optText + " searching= " + fnd);
if (optText.substr(0, fnd.length) == fnd) {
selects.selectedIndex = i;
return false;
}
}
//if (fnd.length > 2) fnd = "";
//return false;
}
</script>

<body>
Test Drop-Down menu
<div id="searchit">
<select onkeypress="return findOption(this)">>
<option value ="0">AB AT HOME</option>
<option value ="1">AC AT HOME</option>
<option value ="2">AD AT HOME</option>
<option value ="3">BILLY</option>
<option value ="4">BRAND</option>
<option value ="5">BURRO</option>
<option value ="6">DARK</option>
<option value ="7">DESIGNER</option>
<option value ="8">DICOR</option>
<option value ="9">EDUCATION</option>
<option value ="10">ENTERTAINMENT</option>
<option value ="11" selected>GENERIC</option>
<option value ="12">LILLY PULITZER</option>
<option value ="13">MARQUIS</option>
<option value ="14">OPEN LINE</option>
<option value ="15">PROPRIETARY</option>
<option value ="16">SAPER 300</option>
<option value ="17">SPORTS</option>
<option value ="18">SUPREME DIMENSIONS</option>
<option value ="19">TEST</option>
</select>
</div>
</body>
</html>

Any hints, suggestions, or ideas on how to do this with JavaScript?
If you have any information or suggestions regarding this topic, please post a reply here.

Webforumz Staff · #2 (**permalink**) May 26th, 2005, 18:23

You've already got some fairly complex javascript so I'll just give you the general idea of what you're trying to do. If you need help with the code write back.

You'll want to use the onkeypress event of the SELECT to record the key and when it was pressed (you might consider cancelling the event too). If the key was pressed within a certain amount of time (maybe .5 second) of the last key press then this one is the second letter, otherwise it replaces the first one.

Now you have 2 letters. You can loop through the options of the SELECT and select the first matching one with code.

I suppose you could expand this to allow as many letters to by typed as you like.

This would only find something if someone type n letters though. You might also want to set a timer each time a key is pressed, and if no other keys are pressed before the timer runs out then it runs the search using what's been entered so far.

I can think of a few others ways to make it work depending on how you want it to function.

gecastill · #3 (**permalink**) May 26th, 2005, 18:42

Jeff,

Thank you for offering your time and help.

Which of the two source codes are you referring to?
I rather get the second one working.... I made some modifications. It still needs some work, like the timer.

I was trying to use the setTimeout() but I was not able to get that working.
My understanding is that setTimeout( code, delay) defers execution of code for an interval.. I try putting the setTimeout in the select tag...

Can we make this source work?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test 3</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script type="text/javascript">
// The global variable fnd is a property of the window object
var fnd = "";

/**
* The findOption() searches the drop-down list by reading the text in the option tag
* It searches the list with oner and / or two characters.
*/
function findOption(selects, evt) {
if (window.event) var k = String.fromCharCode(event.keyCode);
else var k = String.fromCharCode(evt.which);
if (k < " " || k > "~") return true;
if (k == " ") {
fnd = "";
return false;
} else fnd += k.toUpperCase();

//if (fnd.length <= 2) {
for (var i = 0; i < selects.options.length; i++) {
var optText = selects.options[i].text.toUpperCase();
alert(i + ". option= " + optText + " searching= " + fnd);
if (optText.substr(0, fnd.length) == fnd) {
selects.selectedIndex = i;
if (fnd.length == 2) fnd = "";
return false;
} // end of inner if body
} // end of for loop
/*} else {
if (optText.substr(fnd.length-1, fnd.length) == fnd) {
selects.selectedIndex = i;
return false;
}
}*/
fnd = "";
} // End of the findOption() function.
</script>

<body>
Test Drop-Down menu
<div id="searchit">
<select onkeypress="return findOption(this)">
<option value ="0">AB AT HOME</option>
<option value ="1">AC AT HOME</option>
<option value ="2">AD AT HOME</option>
<option value ="3">BILLY</option>
<option value ="4">BRAND</option>
<option value ="5">BURRO</option>
<option value ="6">DARK</option>
<option value ="7">DESIGNER</option>
<option value ="8">DICOR</option>
<option value ="9">EDUCATION</option>
<option value ="10">ENTERTAINMENT</option>
<option value ="11" selected>GENERIC</option>
<option value ="12">LILLY PULITZER</option>
<option value ="13">MARQUIS</option>
<option value ="14">OPEN LINE</option>
<option value ="15">PROPRIETARY</option>
<option value ="16">SAPER 300</option>
<option value ="17">SPORTS</option>
<option value ="18">SUPREME DIMENSIONS</option>
<option value ="19">TEST</option>
</select>
</div>
</body>
</html>

Any help and suggestions are welcome. Thanks

gecastill · #4 (**permalink**) May 26th, 2005, 19:02

Jeff,

Basically what I need is the built-in functionality of the one character search plus the two character functionality. I need the two character to behave the same way as the one character search. That they can work together, all together in the drop-down list, NO extra search box or anything like that.

Webforumz Staff · #5 (**permalink**) May 26th, 2005, 20:21

I'll put this code together, cause it's kind of an interesting idea. I've got some work I have to take care of first though, so I won't have it ready until later in the day.

Webforumz Staff · #6 (**permalink**) May 26th, 2005, 22:12

Ok, I think this works the way you want it. The .5 second timer is to try to separate when someone changes their mind from say first "AB AT HOME" to "DARK" from someone who's looking for "AD AT HOME".

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title>Test 3</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
</head> 
<script type="text/javascript"> 
// The global variable fnd is a property of the window object 
var fnd = ""; 
var tmr;
/** 
* The findOption() searches the drop-down list by reading the text in the option tag 
* It searches the list with oner and / or two characters. 
*/ 
function findOption(selects, evt) { 
	if (window.event) var k = String.fromCharCode(event.keyCode); 
		else var k = String.fromCharCode(evt.which); 
	if (k < " " || k > "~") return true; 
	if (k == " ") { fnd = ""; } else fnd += k.toUpperCase(); 

	
	if (fnd.length==2) searchOptions();
	window.clearTimeout(tmr);
	tmr = window.setTimeout("searchOptions()",500);
	return (fnd.length==1);
}

function searchOptions() {
	window.clearTimeout(tmr);
	if (fnd.length>1) {
		for (var i = 0; i < selbx.options.length; i++) { 
			var optText = selbx.options[i].text.toUpperCase(); 
			//alert(i + ". option= " + optText + " searching= " + fnd); 
			if (optText.substr(0, fnd.length) == fnd) { 
				selbx.selectedIndex = i; 
				if (fnd.length == 2) fnd = ""; 
				return false; 
			}
		}
	}
	fnd = "";
}

</script> 

<body> 
Test Drop-Down menu 
<div id="searchit"> 
<select id="selbx" onkeypress="return findOption(this)"> 
<option value ="0">AB AT HOME</option> 
<option value ="1">AC AT HOME</option> 
<option value ="2">AD AT HOME</option> 
<option value ="3">BILLY</option> 
<option value ="4">BRAND</option> 
<option value ="5">BURRO</option> 
<option value ="6">DARK</option> 
<option value ="7">DESIGNER</option> 
<option value ="8">DICOR</option> 
<option value ="9">EDUCATION</option> 
<option value ="10">ENTERTAINMENT</option> 
<option value ="11" selected>GENERIC</option> 
<option value ="12">LILLY PULITZER</option> 
<option value ="13">MARQUIS</option> 
<option value ="14">OPEN LINE</option> 
<option value ="15">PROPRIETARY</option> 
<option value ="16">SAPER 300</option> 
<option value ="17">SPORTS</option> 
<option value ="18">SUPREME DIMENSIONS</option> 
<option value ="19">TEST</option> 
</select> 
</div> 
</body> 
</html>

gecastill · #7 (**permalink**) May 27th, 2005, 13:22

Jeff,

Your modification to the code I posted works :o . That is exactly what I need. Now I need to get it working with 1 or more keys. I try to get it working with 1 or more keys but I have not being able to since I don't completely understand how your timer code works yet.
So I have a couple of questions about how you use the setTimeout().

I don't understand

the flow of this piece of code

if (fnd.length == 2) searchOptions();
window.clearTimeout(tmr);
tmr = window.setTimeout("searchOptions();", 500);
return (fnd.length == 1);
}

I know that if the user only press one key you don't call the searchOptions() and you search the list with one character which is a functionality already built in.

Also, I don't understand this part, why are you cancelling the deferred execution with clearTimeout().....
Why are you checking if fnd.length > 1 do you still need to check for that here?
function searchOptions() {
window.clearTimeout(tmr);
if (fnd.length > 1) {

If I wanted to make it work for n [1 or more] letters instead of just 1 or two letters... do I just change this piece of code
if (fnd.length == 2) searchOptions();

with this

if (fnd.length > 1) searchOptions();

I think my problem is that I don't know how to reset the timer every time a key is press and how to clean the fnd variable when it matches to a word in the list.

Can you give me your full-name and email address so I can give you credit :wink: in the code for your help?

Again thank you for your time and feedback.

gecastill · #8 (**permalink**) May 31st, 2005, 15:11

Jeff,

I got it working to search with 1 or more characters in the drop-down list.
I was able to understand the flow of the timer and then modified.

bye

Webforumz Staff · #9 (**permalink**) May 31st, 2005, 16:20

I'm glad you got it worked out. I had already set it up for 1 or 2 keys, so you shouldn't have needed to change much unless you wanted 3 keys or more.

Webforumz Staff · #10 (**permalink**) May 31st, 2005, 19:33

To give a longer explaination in case others want it though here's the answers to your questions.

Code: Select all

if (fnd.length == 2) searchOptions(); 
window.clearTimeout(tmr); 
tmr = window.setTimeout("searchOptions();", 500); 
return (fnd.length == 1); 
}

The ==2 is the number of keys it will immediately search on. So if you changed the number to 3, it would search on 1 key, 2 keys after a .5 second pause, and 3 keys as soon as the third key is entered. You would want to use a specific number like ==3 instead of >1 because it would reset every time it hit the 2nd key.

The return (fnd.length==1) is about overriding the default action of pressing a key. On the first key press you want the select to do what it normally does which is match the letter. For the second key press though, you want to cancel the default behaviour of the select box because we're trying to match on something other than just the second key pressed. For example if you press "E" "B" you don't want it to go to "book" on the second key press.

Quote:

Also, I don't understand this part, why are you cancelling the deferred execution with clearTimeout().....
Why are you checking if fnd.length > 1 do you still need to check for that here?
function searchOptions() {
window.clearTimeout(tmr);
if (fnd.length > 1) {

When the 2nd key is pressed the search runs right away, so I don't want it to run again when the timer goes off .5 second later.

The length>1 part is in case the timer fires after only 1 key press the default behavior of the select has already taken care of the search so I don't need to do anything other than clear fnd.

I hope that clears up the changes and why I put in what I did. Mostly all you have to do to change it is change the ==2 to whatever max number of keys you want, and possibly change the 500 in the timer to something faster or slower depending on what kind of pause you think is best.

And for credit, just point people here. :wink:

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
2 Drop down list - auto select depending on choice from first list	ciaranleeper	JavaScript Forum	0	Mar 26th, 2008 10:38
Select drop down list will not accept css	cpando1974	Web Page Design	5	Mar 18th, 2008 14:27
List of Top 100 Search Engines & Web Directories – Part 1	webtooperz	Link Building and Link Sales	0	Oct 13th, 2006 06:02
All You Need for SEO (Search Engine Optimization) - Resources List	Webnauts	Search Engine Optimization (SEO)	0	Nov 13th, 2005 07:47
Horizontal drop down list	Ranko	Web Page Design	8	Oct 23rd, 2004 10:25

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
How can I search a drop-down list using JavaScript in IE