Menu
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 = “”;
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;
}
}
} // 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 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.