Auto populate the Dropdown List

Discussion in 'Javascript' started by eureka, Jan 11, 2007.

  1. eureka

    eureka Guest

    Hi All,

    I'm training in Servlets, JSP and JavaScript,

    I have a web page in which there's a "StudentName" 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, Jan 11, 2007
    #1
    1. Advertising

  2. eureka

    Guest

    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.
    eureka wrote:
    > Hi All,
    >
    > I'm training in Servlets, JSP and JavaScript,
    >
    > I have a web page in which there's a "StudentName" 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,
     
    , Jan 11, 2007
    #2
    1. Advertising

  3. eureka

    Evertjan. Guest

    eureka wrote on 11 jan 2007 in comp.lang.javascript:

    > Is it also possible through Java/JavaScript to link a particular
    > control directly to some database table?
    >


    Javascript has nothing to do with Java but the name.

    What is a "control"?
    What would be the use linking such thing to a database table?

    Clientside javascript usually cannot reach a [serverside] database,
    if we are talking web pages [do you?]

    This NG is for Javascript, and if not specifically stated otherwise,
    clientside javascript on/in an internet web page is ment.

    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
     
    Evertjan., Jan 11, 2007
    #3
  4. eureka

    eureka Guest

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

    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..besides on
    every onFocus() event the JavaScript function will be called which will
    do the matching, I think that'l probably cause overhead !

    I've also been suggested AJAX, but never worked with it before so I'd
    be grateful if any1 provides any suggestions regarding the same.
     
    eureka, Jan 11, 2007
    #4
  5. eureka

    eureka Guest

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

    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..besides on
    every onFocus() event the JavaScript function will be called which will
    do the matching, I think that'l probably cause overhead !

    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.
     
    eureka, Jan 11, 2007
    #5
  6. eureka

    eureka Guest

    Evertjan. wrote:

    > Javascript has nothing to do with Java but the name.
    >
    > What is a "control"?
    > What would be the use linking such thing to a database table?
    >
    > Clientside javascript usually cannot reach a [serverside] database,
    > if we are talking web pages [do you?]
    >
    > This NG is for Javascript, and if not specifically stated otherwise,
    > clientside javascript on/in an internet web page is ment.
    >
    > --
    > Evertjan.
    > The Netherlands.
    > (Please change the x'es to dots in my emailaddress)


    Hi there,
    Thanks for your reply.

    By control I actually meant some Html form component..like a DropDown
    List ..

    I have on my web page a DD displaying the names of all the students
    studying in an institute, but I need that at runtime say if any of
    these students were to be deleted or new ones added (in the backend)
    then without refreshing the entire page the changes be reflected in the
    corresponding DD..

    I am aware that this cant exactly be achieved through CSJS..but I'm
    still learning so just wanted to check if there was any alternative at
    all.
     
    eureka, Jan 11, 2007
    #6
  7. eureka

    eureka Guest

    Evertjan. wrote:
    JavaSript has nothing to do with Java but the name.
    >
    > What is a "control"?
    > What would be the use linking such thing to a database table?
    >
    > Clientside javascript usually cannot reach a [serverside] database,
    > if we are talking web pages [do you?]
    >
    > This NG is for Javascript, and if not specifically stated otherwise,
    > clientside javascript on/in an internet web page is ment.
    >
    > --
    > Evertjan.
    > The Netherlands.
    > (Please change the x'es to dots in my emailaddress)




    Hi there,
    Thanks for your reply.

    By control I actually meant some Html form component..like a DropDown
    List ..


    I have on my web page a DD displaying the names of all the students
    studying in an institute, but I need that at runtime say if any of
    these students were to be deleted or new ones added (in the backend)
    then without refreshing the entire page the changes be reflected in the

    corresponding DD..


    I am aware that this cant exactly be achieved through CSJS..but I'm
    still learning so just wanted to check if there was any alternative at
    all.
     
    eureka, Jan 11, 2007
    #7
  8. eureka

    Randy Webb Guest

    eureka said the following on 1/11/2007 12:13 PM:
    > 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..besides 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.javascript FAQ - http://jibbering.com/faq/index.html
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
     
    Randy Webb, Jan 11, 2007
    #8
  9. eureka

    Evertjan. Guest

    eureka wrote on 11 jan 2007 in comp.lang.javascript:
    > Evertjan. wrote:
    >> Javascript has nothing to do with Java but the name.
    >>
    >> What is a "control"?
    >> What would be the use linking such thing to a database table?
    >>
    >> Clientside javascript usually cannot reach a [serverside] database,
    >> if we are talking web pages [do you?]
    >>
    >> This NG is for Javascript, and if not specifically stated otherwise,
    >> clientside javascript on/in an internet web page is ment.
    >>

    > By control I actually meant some Html form component..like a DropDown
    > List ..
    >
    > I have on my web page a DD displaying the names of all the students
    > studying in an institute, but I need that at runtime say if any of
    > these students were to be deleted or new ones added (in the backend)
    > then without refreshing the entire page the changes be reflected in the
    > corresponding DD..
    >
    > I am aware that this cant exactly be achieved through CSJS..but I'm
    > still learning so just wanted to check if there was any alternative at
    > all.


    Anything like that can be done with clientside javascript, when the
    corresponding serverside will deliver the neccessary data.

    See Randy's answer elsewhere.

    However, you should concider if the gain of using an AJAX/xmlhttp like
    construction is worth it against rerequesting a page,
    If you download aal the students data anyway.

    More interesting would be, if you could request via Ajax just the few
    students that should be left out of the primary list.

    Then a DOM guided search and delete of some drop down list <option>s
    could be a quicky, and could even be done with some display of clientside
    firework.

    Using AJAX/xmlhttp tricks seems only wothwhile if the amount of data
    requested is very small in comparison to the page download size,
    and/or the dynamicity required is high. Or if the page has inmages that
    you do not want to blink. [Other options, anyone?]

    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
     
    Evertjan., Jan 11, 2007
    #9
  10. eureka wrote:

    > I have a web page in which there's a "StudentName" 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="StudentName"
    style="text-transform:uppercase" onKeyUp="
    while (s.options.length) s.options[0] = null
    for (i=0; i<v.length; ++i)
    if (new RegExp('^'+(this.value).toUpperCase()).exec(v))
    s.options[s.length] = new Option(v,v)">
    <select size="1" name="Names" style="width:250px"></select>
    </form>
    <script type="text/javascript">
    v = new Array('J\'K','JA','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
     
    Bart Van der Donck, Jan 11, 2007
    #10
  11. eureka

    eureka Guest

    Randy Webb wrote:
    > eureka said the following on 1/11/2007 12:13 PM:
    > > 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..besides 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.javascript 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, Jan 11, 2007
    #11
  12. eureka

    eureka Guest

    Bart Van der Donck wrote:
    > eureka wrote:
    >
    > > I have a web page in which there's a "StudentName" 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="StudentName"
    > style="text-transform:uppercase" onKeyUp="
    > while (s.options.length) s.options[0] = null
    > for (i=0; i<v.length; ++i)
    > if (new RegExp('^'+(this.value).toUpperCase()).exec(v))
    > s.options[s.length] = new Option(v,v)">
    > <select size="1" name="Names" style="width:250px"></select>
    > </form>
    > <script type="text/javascript">
    > v = new Array('J\'K','JA','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 .
     
    eureka, Jan 11, 2007
    #12
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Mark Goldin

    Populate dropdown list

    Mark Goldin, Jul 24, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    522
    Jeffrey Palermo [MCP]
    Jul 26, 2004
  2. =?Utf-8?B?TWVyZGFhZA==?=

    How to populate dropdown list from database?

    =?Utf-8?B?TWVyZGFhZA==?=, Oct 20, 2004, in forum: ASP .Net
    Replies:
    3
    Views:
    10,435
    =?Utf-8?B?TWVyZGFhZA==?=
    Oct 20, 2004
  3. Dave
    Replies:
    1
    Views:
    1,268
    Roy Schestowitz
    Jan 25, 2005
  4. linkswanted
    Replies:
    1
    Views:
    968
  5. Steve Myers
    Replies:
    2
    Views:
    288
    Steve Myers
    Nov 20, 2003
Loading...

Share This Page