Search select list?

[jojowebdev]

I have been TRYING for a few days to get a *working* search of a select
list (about 800 options in list). I have not found one that works for
IE6.

Here is what I *last* tried. I would appreciate any help to get me
through this. Thank you.

function searchList(textInput) {
var carrier_list = document.carrRequestForm.carrierList;
for (i = 0; i < carrier_list.length; i++) {
if (carrier_list.indexOf(textInput.value) == 0) {
carrier_list.selectedIndex = i;
break;
}
}
}


Then in body..

<form action="process_Carrier_Request_Form.asp?..etc.." method="post"
name="carrRequestForm">

Quick Carrier Search: <br />
<input type="text" id="search" onkeyup="searchList(this)"/><br />

<select size="19" id="carrierList">
<%=carrier_name%> <!-- list of 800 carriers -->
</select>
<br />
<input class="frmButton" type="submit" value="Select Carrier and Close
Window"/><br />

</form>

 

[RobG]

I have been TRYING for a few days to get a *working* search of a select
list (about 800 options in list). I have not found one that works for
IE6.

I think a number have been posted here.

Here is what I *last* tried. I would appreciate any help to get me
through this. Thank you.

function searchList(textInput) {
var carrier_list = document.carrRequestForm.carrierList;
for (i = 0; i < carrier_list.length; i++) {

You should keep i local, letting counters slip into the global space can
cause serious problems.

If you have 800 options, it will be more efficient to get the length
once and store it rather than looking it up (potentially) 800 times:

for (var i=0, len=carrier_list.length; i<len; i++) {

if (carrier_list.indexOf(textInput.value) == 0) {

carrier_list will return an option element. It doesn't have an
indexOf() method, so you should get an error here.

However, the *value* of the option is a string, and you can use
indexOf() with that, so:

if ( carrier_list.value.indexOf(textInput.value) == 0) {


will return true if textInput matches the start of the value (or all of it).

carrier_list.selectedIndex = i;
break;

I don't like 'break', just return.


<script type="text/javascript">

function searchList(el)
{
var txt = el.form.elements['text_0'].value;
var opts = el.form.elements['sel_A'].options;
var t;

for (var i=0, len=opts.length; i<len; ++i){
t = opts;
if ( t.value.indexOf(txt) == 0){
t.selected = true;
return;
}
}
}

</script>

<form action="">
<div>
<select name="sel_A">

<!-- For testing to create 100 options -->
<script type="text/javascript">
var t = '';
for (var i=0; i<100; i++){
t += '<option value="' + i + '">' + i;
}
document.write(t);
</script>

</select>
<input type="text" id="text_0">
<input type="button" value="Select..."
onclick="searchList(this);">
</div>
</form>