I have a Select Box that pulls a lot of records from a database, approx. 1000 names. I need a quick way of narrowing the
search down when I start typing. I have been testing with the bottom code. Everything works, except it is extremely slow when
typing in the form field. I need something that is quick and accurate. Can this be finetuned to be more efficient or is there better scripts out there? It has to be a way to pull all the recent information in the database because I have people adding new records all the time.
--------------------------
<script LANGUAGE="javascript">
<!-- Begin
function SelObj(formname,selname,te
xtname,str
) {
this.formname = formname;
this.selname = selname;
this.textname = textname;
this.select_str = str || '';
this.selectArr = new Array();
this.initialize = initialize;
this.bldInitial = bldInitial;
this.bldUpdate = bldUpdate;
}
function initialize() {
if (this.select_str =='') {
for(var i=0;i<document.forms[this.
formname][
this.selna
me].option
s.length;i
++) {
this.selectArr[i] = document.forms[this.formna
me][this.s
elname].op
tions[i];
this.select_str += document.forms[this.formna
me][this.s
elname].op
tions[i].v
alue+":"+
document.forms[this.formna
me][this.s
elname].op
tions[i].t
ext+",";
}
}
else {
var tempArr = this.select_str.split(',')
;
for(var i=0;i<tempArr.length;i++) {
var prop = tempArr[i].split(':');
this.selectArr[i] = new Option(prop[1],prop[0]);
}
}
return;
}
function bldInitial() {
this.initialize();
for(var i=0;i<this.selectArr.lengt
h;i++)
document.forms[this.formna
me][this.s
elname].op
tions[i] = this.selectArr[i];
document.forms[this.formna
me][this.s
elname].op
tions.leng
th = this.selectArr.length;
return;
}
function bldUpdate() {
var str = document.forms[this.formna
me][this.t
extname].v
alue.repla
ce('^\\s*'
,'');
if(str == '') {this.bldInitial();return;
}
this.initialize();
var j = 0;
pattern1 = new RegExp("^"+str,"i");
for(var i=0;i<this.selectArr.lengt
h;i++)
if(pattern1.test(this.sele
ctArr[i].t
ext))
document.forms[this.formna
me][this.s
elname].op
tions[j++]
= this.selectArr[i];
document.forms[this.formna
me][this.s
elname].op
tions.leng
th = j;
if(j==1){
document.forms[this.formna
me][this.s
elname].op
tions[0].s
elected = true;
//document.forms[this.form
name][this
.textname]
.value = document.forms[this.formna
me][this.s
elname].op
tions[0].t
ext;
}
}
function setUp() {
obj1 = new SelObj('menuform','itemlis
t','entry'
);
// menuform is the name of the form you use
// itemlist is the name of the select pulldown menu you use
// entry is the name of text box you use for typing in
obj1.bldInitial();
}
// End -->
</script>
<body OnLoad="javascript:setUp()
">
<form name="menuform" onSubmit="javascript:windo
w.location
= document.menuform.itemlist
.options[d
ocument.me
nuform.ite
mlist.sele
ctedIndex]
.value;ret
urn false;">
<table>
<td>Substitute</td>
<td>
<select size="5" name="itemlist" width="50" style="width:300px">
<!--#include file="GetSub.asp"-->
</select><br>
<input type="text" size="35" onKeyUp="javascript:obj1.b
ldUpdate()
;" name="entry">
</td>
</tr>
<input type="submit" name="submit" value="Next" > <input type="submit" name="Close" value="Close" onclick="javascript:window
.close();"
>
</td>
</tr>
</form>
</table>
