Can view the tutorials best in Google Chrome, Mozilla Firefox, Opera, higher version of Internet Explorer

Example: Get Autocomplete Feature In Java/Jsp With jQuery API

jQuery » On Sep 9, 2012 | { 23 Comments }

Hi friends, let us see how to get autocomplete effect in normal java/jsp applications, with the help of jQuery. I hope every body knows the importance of using autocomplete feature in java/.net or some other technologies.   Am going to use jQuery API in order to get this effect into normal jsp to make our life little easier :-) , let us start….

Required Files:

  • index.jsp
  • list.jsp
  • jquery.autocomplete.js
  • jquery-1.4.2.min.js
  • style.css

Web application Directory Structure:

te

Note:  File i used in css,images directories are just for giving little graphical touch :-) if want you can remove them.

index.jsp:

List.jsp

style.css

Output:

Explanation:

See in list.jsp line no.33 you may get one doubt, what is that ‘q‘ right ? in fact we are not sending any parameter with name ‘q’ from the input.jsp but for every keyup in the text box (in index.jsp) jquery will sends each character to the list.jsp in the form of ‘q’ and compares with the values in that list, i mean ‘q’ is the default parameter using by jQuery API.

How to send extra parameters along with that q:

$(‘#country’).autocomplete(“list.jsp”, {extraParams: {state: California }} );

This will generates the internal URL like

……./getdata.jsp?q=ourChar&state=California

 

Output Video Format:

 

What you are thinkig....

23 Responses to “Example: Get Autocomplete Feature In Java/Jsp With jQuery API”
  1. ASD says:

    Good One Java4s team.nice explanation..:)

  2. Pavan says:

    good example…sir,is their any jquery plugin for automatic session end of an user and logging out if the user is idle for some time…eg banking application…

  3. Java4s says:

    @Pavan

    Yeah we can use ‘jQuery Idle Timeout‘ concept, but i don’t encourage this way as being in session is very important for any application, if we use jQuery for sessions its little risky as jQuery depends on browsers some times.

    So always better choice is considering the underlying(in what technology we did the particular application) technology only.

  4. Ramkumar says:

    What if i want autocomplete from multiple table from a database

  5. srinivas says:

    Hai sir…………my question is…i done as same in ur page….but it’s not able to autocomplete the testbox…i created a table “countries” in database also..i added a jar file also…please suggest me to autocomplete..
    THANKS IN ADVANCE

  6. Srinu says:

    Hi, can you please explain me what is the content in jquery.autocomplete.js file and navigation from jsp page to jquery.

  7. Java4s says:

    @Srinu

    It is predefined API file, we no need to worry about that, just download and use it :-)

  8. Raaj says:

    I am using same as written here in the code , but m not getting the data..even i am printing the ‘q’ in the list.jsp ,,,,, that file also not calling even…….
    All and all in this ‘list.jsp’ is not calling ……m having that list.jsp in other location so m passing the path there,,,,,
    “jsp/masters/list.jsp” ……..please help me for this.

  9. vikram says:

    Sir thanks alot…. Fan fan fan….. :)

  10. vijay says:

    where do i get jquery.autocomplete.js and jquery-1.4.1.min.js required files

  11. ramesh golla says:

    Good Example, i got the result but when i am searching something, that is not in the list it showing many nullpointer exceptions, give solutions

  12. Praveen says:

    I followed your tutorial but the autocomplete showed “No Search Results” although i can see the results in the response sent by server in the developer tools.. What can be the issue?

    I also posted the question on stackoverflow – http://stackoverflow.com/q/16207918/1208469

  13. Afzal says:

    Thanks for this great example.. can you please help me in this case.
    In the same example i have a text box in Display.jsp and i want to send the parameter of the same text box to fetchData.java so that i can use it in sql query where condition

  14. Siva says:

    It’s ok. but How to create auto complete search for multiple tables data…

  15. alaa says:

    it good example
    but i try to with Arabic data it not work

  16. sanath says:

    this is excellent work……

  17. prasad says:

    nice example, its workingggggg.

  18. VenuGopal says:

    Hi Java4s,,,

    above example superb for single instance..and how to implements for mulltiple input instance…
    plz solution its emergency…
    thanks,

  19. kautuk says:

    thanq for the example .but as i am java learner i am not able to find Jquery so can u please send path or Jquery

    thank you once again

  20. lakshmi says:

    Hi, Thanks For This Great Example. can you please help for some issue is if i place this auto complete text box in div. results are moving along with div because that div has overflow: auto. but i don’t want that. can you please give me solution for this.

  21. Mahesh says:

    could update JSP and Webservices I am eagerly waiting for those topics
    please do it as soon as possible…

If you want a pic to show with your comment, go get a gravatar !
Please post your questions on Java4s Answers forum

Name*
Ask a Question ?
or
Mail*
Website



By posting your answer, you agree to our comments policy.
Most Recent Tutorials
Hibernate Recent Posts
Spring Recent Posts
Struts Recent Posts
Recomandded Links Current & UpComing Tutorials Java4s.com
Tutorials Online :
spring Hibernate struts Json Ajax Log4j Log4j
coreJava Servlets


UpComing :
Jsps,Web Services
Java4s is optimized for learning java technologies, all the examples in this site are constantly reviewed to avoid errors. While using this site you agree to have read and accepted our terms of use and privacy policy
Especially i have prepared this blog by keeping fresher's in mind, however it will be very useful for real time developers too.


© 2014 Java4s All rights reserved. | strPro4Tut v(2.0) Theme designed by Team Java4s.