The Project
Specifically, what needed to get working was a project at my work that involved porting
a desktop application created in Microsoft Access to a web-based PHP/MySql intranet
application. Among the directives from management was to make the web application look
and behave as much like the existing Access application as possible. And one of the
many small features of this application which didn’t map precisely to the web platform
was a self-populating drop down search field. You’ve certainly seen these in various
applications: the user begins to type in a text box, and as they do, the drop down box
is populated with a list (usually alphabetically ordered), starting with the string that
is being typed. As each letter is typed, the list changes and (usually) becomes more narrowly
focused.
a desktop application created in Microsoft Access to a web-based PHP/MySql intranet
application. Among the directives from management was to make the web application look
and behave as much like the existing Access application as possible. And one of the
many small features of this application which didn’t map precisely to the web platform
was a self-populating drop down search field. You’ve certainly seen these in various
applications: the user begins to type in a text box, and as they do, the drop down box
is populated with a list (usually alphabetically ordered), starting with the string that
is being typed. As each letter is typed, the list changes and (usually) becomes more narrowly
focused.
To recreate this in a web page I had several options. First, I could build the Select
element server side with PHP, populating the Option elements from the database, and send
the page with the pre-populated list. I could then tie into that option list with some
Javascript that searched the list and selected the appropriate option based on the string
typed into the text box. Fairly straightforward, except that the option list I needed to
create had more than 60,000 records and was growing by a couple thousand every month. In
fact, a previous developer had prototyped this method in ASP. The resulting page sent to
the browser, with it’s 60,000 option-long Select list, was nearly 4 MB. And the Javascript
that searched the list with each “onkeyup” in the textbox was extremely slow, about 5-10
seconds between each keypress, or 30-seconds to type “Smi” and point to the “Smith” records.
element server side with PHP, populating the Option elements from the database, and send
the page with the pre-populated list. I could then tie into that option list with some
Javascript that searched the list and selected the appropriate option based on the string
typed into the text box. Fairly straightforward, except that the option list I needed to
create had more than 60,000 records and was growing by a couple thousand every month. In
fact, a previous developer had prototyped this method in ASP. The resulting page sent to
the browser, with it’s 60,000 option-long Select list, was nearly 4 MB. And the Javascript
that searched the list with each “onkeyup” in the textbox was extremely slow, about 5-10
seconds between each keypress, or 30-seconds to type “Smi” and point to the “Smith” records.
Perhaps the Javascript could have been optimized somewhat, but to have a 4 MB page being
requested concurrently, and often, by 10-plus users obviously wouldn’t work. So a second
option I had was to omit the Select list and just make the textbox a standard search field.
Type in “Smi”, hit enter, and get back a list of all the “Smi*” records.
A reasonable approach, but I felt it didn’t meet the “emulate Access” directive closely enough.
requested concurrently, and often, by 10-plus users obviously wouldn’t work. So a second
option I had was to omit the Select list and just make the textbox a standard search field.
Type in “Smi”, hit enter, and get back a list of all the “Smi*” records.
A reasonable approach, but I felt it didn’t meet the “emulate Access” directive closely enough.
So finally, to the subject of the article. I thought, if I could talk to the server from
the client, somehow without reloading the current page, I could “fake” the dynamic drop
down list. Searching the net, I found several Remote Scripting options: several Java applets,
a very nice and well-used Javascript library from Brent Ashley http://www.ashleyit.com/rs/main.htm,
and other methods. But I settled on the Iframe approach referenced at the beginning of this
article for it’s simplicity and lightweight implementation.
the client, somehow without reloading the current page, I could “fake” the dynamic drop
down list. Searching the net, I found several Remote Scripting options: several Java applets,
a very nice and well-used Javascript library from Brent Ashley http://www.ashleyit.com/rs/main.htm,
and other methods. But I settled on the Iframe approach referenced at the beginning of this
article for it’s simplicity and lightweight implementation.
