I am currently using this code to show a dropdown box of all the clients in my database. Currently around 2500. This box loads instantly on its own.]
<select name="client_id">
<?
$check_name = $user_fullname;
$query = 'SELECT c1.client_name AS c1_client_name, c2.client_name AS c2_client_name, c1.client_surname AS c1_client_surname, c2.client_surname AS c2_client_surname, c1.client_id AS client_id, c1.client_rel_id AS c1_client_rel_id'
. ' FROM client c1'
. ' LEFT JOIN client c2 ON c1.client_rel_id = c2.client_id'
. ' WHERE (c1.client_archive = "0" AND c1.client_rel_id = "") OR (c1.client_archive = 0 AND c1.client_sex = "Male" AND c2.client_sex = "Female") OR (c1.client_archive = "0" AND c1.client_sex = c2.client_sex AND c1.client_id < c2.client_id)'
. ' ORDER BY c1.client_surname, c1.client_name';
$results = mysql_query($query);
while ($row = mysql_fetch_assoc($results
)) {
if ($row['c1_client_rel_id'] == '') {
echo '<option value="' . $row['client_id'] . '">';
echo $row['c1_client_surname'] . ', ' . $row['c1_client_name'];
echo "</option>\n";
} else {
echo '<option value="' . $row['client_id'] . '">';
echo $row['c1_client_surname'] . ', ' . $row['c1_client_name'];
echo ' and ';
echo $row['c2_client_surname'] . ', ' . $row['c2_client_name'];
echo "</option>\n";
}
}
?><option value=" " selected="selected"> </option>
</select>
However, i want to add a quick search box so as you type in letters the dropdown box becomes smaller and smaller with relevant entries. I have used javascript successfully to do this however it is VERY SLOW. depending on the speed of the pc using the page it can take anywhere between 8-15 seconds to load this page. Baring in mind without the javascript it loads instantly with all 2500 entries in the dropdown.
Please can anyone suggest how i can speed up the javascript or an alternative which is much quicker? Possibly ajax?
Here is the javascript i include in this page:
include "key_clients.html";
--------------------
key_clients.html
--------------------
<head>
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Anand Raman (anand_raman@poboxes.com) -->
<!-- Web Site:
http://www.angelfire.com/ar/diduknow -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!!
http://javascript.internet.com -->
<!-- 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('form2','client_id'
,'client_i
d_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>
</head>
And i also add a small text box infront of the dropdown box which i pasted at the top:
<input type="text" name="client_id_entry" size="20" onKeyUp="javascript:obj1.b
ldUpdate()
;">
Any help would be greatly appreciated as this page takes waaaay too long to load.
AR
Start Free Trial
