Auto populate the Dropdown List

[eureka]

Hi All,

I'm training in Servlets, JSP and JavaScript,

I have a web page in which there's a "StudentNam e" textbox and
below it is a "Names" Dropdown list. Initially the Textbox is empty
and the Dropdown doesnt have any items..

The requirement is that as soon as one goes on typing the letters in
the StudentName-textbox the corresponding matching names have to appear
in the DD located below.
Like say if I just key in 'J' then all the student-names from the
"Names - table(backend-MySql)" starting with 'J' have to appear
in the DD, say if I'm typing in "Jo" then just names such as
"John"," Joanna" etc need appear ..this is much like when we
send emails ...wherein automatically the matching entries for the
typed-in address show up from our address book in a dropdown list below
the "To" textbox..

Can anyone help me with suggestions regarding this...

P.S:- Is it also possible through Java/JavaScript to link a particular
control directly to some database table?
For e.g. can I directly link a DD to the backend-table and have just
the dropdown refreshed every time there was an addition/deletion to the
table and not the whole page..

Thanks,

[eureka]

Randy Webb wrote:

eureka said the following on 1/11/2007 12:13 PM:

Curtis.Dani...@ gmail.com wrote:

Google "javascript + live search". Pretty much what you'll be doing
is: as they type you will be making a request to a server for all
entries in a database, flat file... that are similar to what is in your
text area. You then want to empty and recreate the options in your
dropdown list. You can probably find code samples that use JSP and
JavaScript to do it.

Hi
Thanks for your reply..

You've suggested that as the user types in some letters in the textbox
request be made to the server for the matching database entries, well I
am not sure if this can be acheived through Client Side
JavaScript(CSJS )

Yes it can.

or with JSP either coz if I' m not wrong the JSP file
that you run from the browser is converted into a java servlet, then
the servlet is compiled to a .class file and then its run, but unlike
Javascript the code in Jsp in not executed everytime an event occurs on
the Html page, it'l only be executed first on the page-request and then
again on every refresh for that page.

Page makes a silent request to the .jsp file, the .jsp file executes on
the server and returns the new list to the browser. The browser then
updates the dropdown. Google uses it.

What I mean is every time the user types in something or the other in
the textbox I think atleast the Jsp/CSJS code wont be able to make a
request to the server for the records..well I'm not very sure about
this since I'm still learning ...if anyone has a further idea as to how
this can be achieved please suggest,

There are several ways, all of which involve requesting a new list from
the server. The difference in the approach would be how you wanted to
transmit that data and how you would handle it on the client.

What I had in mind was that maybe through JSP I could on page request
itself get a connection to the database and collect all the Names from
the Names-table and maybe store them in a hidden field on my page and
then on every onFocus() event of the textbox I could retrieve the text
keyed in the textbox into some variable and compare the first letter
of that text with the first letter of all the names present in my
hidden field one by one and then whatever names match I just populate
them into the DD ..but this achieves only half the purpose..beside s on
every onFocus() event the JavaScript function will be called which will
do the matching, I think that'l probably cause overhead !

Calling the onfocus event won't be the overhead. Trying to retrieve
every word in the database that starts with a letter or two letter
combination would be the overhead. User types the letter A and you
retrieve every word starting with A, and so on.

I've also been suggested AJAX, but never worked with it before so I'd
be grateful if anyone provides any suggestions regarding the same.

AJAX is a buzz word that nearly encompasses any act of getting data from
the server without refreshing the page. That's all. The XMLHttpRequest
object (that AJAX was originally based on) is but one method of getting
data from the server.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javas cript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

Helo Mr.Webb
Thanks a lot for your indepth reply,

Regarding calling the JS function which does the pattern matching -
what I have done is I've already retrieved all the "Student" records in
a hidden field on page load itself and this function simply gets called
on every onFocus() event of the textbox and the value keyed by the user
in the textbox is compared to the names present in the hidden field
itself...no records are retrieved from the database again..atleast not
until the next page request or refresh!

But the drawback is if any addition/deletion/updation is done in the
backend at server side simultaneously then that isnt reflected until we
refresh the page and the hidden field is re-populated and the matching
is carried out again..hence I need a way that on the onFocus() event
itself the request directly be made to the database to get a fresh list
of names depending on the typed text, i.e, maybe a query or a function
be triggered/invoked automatically which gets the list for us, but
being a novice I'm not really sure if this is even remotely possible .

"Page makes a silent request to the .jsp file, the .jsp file executes
on
the server and returns the new list to the browser. The browser then
updates the dropdown. Google uses it."

Can you please guide me as to how I can actually make my JS pass on a
request to my JSP as soon as some event occurs ; is there a way of
addressing JSP code from within JS or is it possible to actually send a
value obtained in the JS code to my JSP scriptlet?

In that case I could just retrieve the value keyed into the textbox in
a variable and pass it on to my scriptlet which in turn would fire a
'select-where' query to get the matching records directly from the
table..I tried this but the JSP code does not recognize the JS
variable, is there possibly a way of achieving this or do I need a
different approach..

Once again, thanx a lot for your help!

[eureka]

Bart Van der Donck wrote:

eureka wrote:

I have a web page in which there's a "StudentNam e" textbox and
below it is a "Names" Dropdown list. Initially the Textbox is empty
and the Dropdown doesnt have any items..

The requirement is that as soon as one goes on typing the letters in
the StudentName-textbox the corresponding matching names have to appear
in the DD located below.
Like say if I just key in 'J' then all the student-names from the
"Names - table(backend-MySql)" starting with 'J' have to appear
in the DD, say if I'm typing in "Jo" then just names such as
"John"," Joanna" etc need appear ..this is much like when we
send emails ...wherein automatically the matching entries for the
typed-in address show up from our address book in a dropdown list below
the "To" textbox..

<form>
<input type="text" name="StudentNa me"
style="text-transform:upper case" onKeyUp="
while (s.options.leng th) s.options[0] = null
for (i=0; i<v.length; ++i)
if (new RegExp('^'+(thi s.value).toUppe rCase()).exec(v[i]))
s.options[s.length] = new Option(v[i],v[i])">
<select size="1" name="Names" style="width:25 0px"></select>
</form>
<script type="text/javascript">
v = new Array('J\'K','J A','JA F','JAN','JAP', 'JAPI/','JO','JOS')
s = document.forms[0].Names
</script>

Entries may not contain ()\|^$?.{}!+* - it should be pretty easy to
filter them out.

Hope this helps,

--
Bart

Yeah thanks,
but the filtering/validation etc has already been taken care of through
JS. The only main thing thats remaining is retrieving the actual
records at runtime on the onFocus() event of the textbox depending on
whatever the user types..

Well its a names-textbox so if the user does type in some number or any
special character then immediately he gets an 'invalid name' msg .