By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,468 Members | 1,859 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,468 IT Pros & Developers. It's quick & easy.

Help with refreshing the options in a DD depending on user input

100+
P: 157
Hi all,

I’m training in Servlets, JSP and JavaScript,.

Here is a snapshot of a portion of my web page, there’s a “StudentName” textbox and below it is a “Names” Dropdown list.

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 ..

What I had in mind is that maybe through JSP I could on page load itself collect all the Names from the Names-table and maybe store them in a hidden field on my page itself and then on the onFocus() event of the textbox I could retrieve the text keyed into 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 …

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 some table and have just the dropdown refreshed every time there was an addition/deletion to the table and not the whole page..

Thanks,
Jan 11 '07 #1
Share this Question
Share on Google+
10 Replies


Expert 100+
P: 1,892
Java and Javascript are two completely seperate things. For your search box I think you are talking about AJAX.

HTH,
Aric
Jan 11 '07 #2

100+
P: 157
Java and Javascript are two completely seperate things. For your search box I think you are talking about AJAX.

HTH,
Aric
Hi, Yes Java and JavaScript are indeed different altogether, but I was sort of confused as to which forum this question belongs to , and besides I have never worked with Ajax before but I'l check out the link ..Thanks!
Jan 11 '07 #3

100+
P: 157
Hi,

I'm working with JavaScript, JSP and Servlets.
I have attached here a snapshot of a portion of my webpage which is a JSP.

I need 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..

So far using JSP + Javascript I’ve achieved that if a person types in just “J” in the textbox then all the names starting with “J” do appear in the DD ..but as he goes on typing further the entries quickly need to be further filtered based on whatever he is typing..

Has anyone ever worked on something like this before, please send me your suggestions..

Thanks,

P.S:- Is it possible that on the onFocus() event of the textbox my JSP make a request to the server and get the refreshed list of matching names. .i.e. I mean like every time the user types in some letter in the textbox the JSP executes some select-where query and gets the matching names from the database right away?
Attached Images
File Type: jpg snapshot.jpg (3.9 KB, 146 views)
Jan 12 '07 #4

10K+
P: 13,264
Hi,

I'm working with JavaScript, JSP and Servlets.
I have attached here a snapshot of a portion of my webpage which is a JSP.

I need 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..

So far using JSP + Javascript I’ve achieved that if a person types in just “J” in the textbox then all the names starting with “J” do appear in the DD ..but as he goes on typing further the entries quickly need to be further filtered based on whatever he is typing..

Has anyone ever worked on something like this before, please send me your suggestions..

Thanks,

P.S:- Is it possible that on the onFocus() event of the textbox my JSP make a request to the server and get the refreshed list of matching names. .i.e. I mean like every time the user types in some letter in the textbox the JSP executes some select-where query and gets the matching names from the database right away?
The answer to the last part of your question is no. Javascript is compiled client side.

This is an all javascript issue but I'll give you a solution here and copy the thread to the js forum for others' comments

[PHP]
//ordinaryAutoComplete.js
function ordinaryAutoComplete (field, select, property, forcematch) {
var found = false;
for (var i = 0; i < select.options.length; i++) {
if (select.options[i][property].toUpperCase().indexOf(field.value.toUpperCase()) == 0) {
found=true;
break;
}
}
if (found) {
select.selectedIndex = i;
}
else {
select.selectedIndex = -1;
alert("Search string not found");

}
if (field.createTextRange) {
if (forcematch && !found) {
field.value=field.value.substring(0,field.value.le ngth-1);
return;
}
var cursorKeys ="8;46;37;38;39;40;33;34;35;36;45;";
if (cursorKeys.indexOf(event.keyCode+";") == -1) {
var r1 = field.createTextRange();
var oldValue = r1.text;
var newValue = found ? select.options[i][property] : oldValue;
if (newValue != field.value) {
field.value = newValue;
var rNew = field.createTextRange();
rNew.moveStart('character', oldValue.length) ;
rNew.select();
}
}
}
}
[/PHP]
the names input goes something like

[HTML]<input name ="name" onkeyup="ordinaryAutoComplete(this,this.form.optio ns1,'text',true)">[/HTML]
Drop down name in the html is options1
Jan 12 '07 #5

100+
P: 157
The answer to the last part of your question is no. Javascript is compiled client side.

This is an all javascript issue but I'll give you a solution here and copy the thread to the js forum for others' comments

[PHP]
//ordinaryAutoComplete.js
function ordinaryAutoComplete (field, select, property, forcematch) {
var found = false;
for (var i = 0; i < select.options.length; i++) {
if (select.options[i][property].toUpperCase().indexOf(field.value.toUpperCase()) == 0) {
found=true;
break;
}
}
if (found) {
select.selectedIndex = i;
}
else {
select.selectedIndex = -1;
alert("Search string not found");

}
if (field.createTextRange) {
if (forcematch && !found) {
field.value=field.value.substring(0,field.value.le ngth-1);
return;
}
var cursorKeys ="8;46;37;38;39;40;33;34;35;36;45;";
if (cursorKeys.indexOf(event.keyCode+";") == -1) {
var r1 = field.createTextRange();
var oldValue = r1.text;
var newValue = found ? select.options[i][property] : oldValue;
if (newValue != field.value) {
field.value = newValue;
var rNew = field.createTextRange();
rNew.moveStart('character', oldValue.length) ;
rNew.select();
}
}
}
}
[/PHP]
the names input goes something like

[HTML]<input name ="name" onkeyup="ordinaryAutoComplete(this,this.form.optio ns1,'text',true)">[/HTML]
Drop down name in the html is options1
Hi r0,
Thanx a lot for your prompt response, I am looking into the code you've provided .I thought this was a JS issue too hence posted this query in the JS forum at first but didnot get any concrete reply hence reposted it in the ever so helpful Java forum.

Thanks again!
Jan 12 '07 #6

b1randon
Expert 100+
P: 171
The answer to the last part of your question is no. Javascript is compiled client side.
JavaScript is an interpreted language. It is <b>run</b> on the client side in a line by line fashion. It is never compiled. It is a common problem with terminology. You probably meant that the code get executed but said compiled which it really isn't.
Jan 12 '07 #7

10K+
P: 13,264
JavaScript is an interpreted language. It is <b>run</b> on the client side in a line by line fashion. It is never compiled. It is a common problem with terminology. You probably meant that the code get executed but said compiled which it really isn't.
Thanks for the correction mate. You are right there is certainly no such thing as a Javascript compiler. I should be more careful with my terminology.
Jan 13 '07 #8

b1randon
Expert 100+
P: 171
Thanks for the correction mate. You are right there is certainly no such thing as a Javascript compiler. I should be more careful with my terminology.
No harm, no foul ^^
Jan 13 '07 #9

100+
P: 157
The answer to the last part of your question is no. Javascript is compiled client side.

This is an all javascript issue but I'll give you a solution here and copy the thread to the js forum for others' comments

[PHP]
//ordinaryAutoComplete.js
function ordinaryAutoComplete (field, select, property, forcematch) {
var found = false;
for (var i = 0; i < select.options.length; i++) {
if (select.options[i][property].toUpperCase().indexOf(field.value.toUpperCase()) == 0) {
found=true;
break;
}
}
if (found) {
select.selectedIndex = i;
}
else {
select.selectedIndex = -1;
alert("Search string not found");

}
if (field.createTextRange) {
if (forcematch && !found) {
field.value=field.value.substring(0,field.value.le ngth-1);
return;
}
var cursorKeys ="8;46;37;38;39;40;33;34;35;36;45;";
if (cursorKeys.indexOf(event.keyCode+";") == -1) {
var r1 = field.createTextRange();
var oldValue = r1.text;
var newValue = found ? select.options[i][property] : oldValue;
if (newValue != field.value) {
field.value = newValue;
var rNew = field.createTextRange();
rNew.moveStart('character', oldValue.length) ;
rNew.select();
}
}
}
}
[/PHP]
the names input goes something like

[HTML]<input name ="name" onkeyup="ordinaryAutoComplete(this,this.form.optio ns1,'text',true)">[/HTML]
Drop down name in the html is options1
Thanks a lot for the above code r0..its working wonderfully ! Amazing logic !!!
Jan 20 '07 #10

10K+
P: 13,264
Thanks a lot for the above code r0..its working wonderfully ! Amazing logic !!!
Good to know it helped.
Jan 20 '07 #11

Post your reply

Sign in to post your reply or Sign up for a free account.