jquery-autocomplete in struts2

Have you ever tried to use jQuery-autocomplete in Struts2?

I used jQuery when I have to add an autocomplete feature on a textbox in my Struts2 project. The textbox should display the existing tags on the textbox, so users could choose any tag displayed by the autocomplete feature. If you want to try an example of jquery-autocomplete, go check it out on this link. You'll also find the demo link on that page. Here are my steps to implement autocomplete in my project:

  1. Create a method to get the existing tags from database.

    .....
    .....
    public String findTag() {
      listTag = daoFactory.getTagDAO().findTagList();
      return SUCCESS;
    }
    .....
    .....

  2. Create a JSP that displays the list of existing tags, called tag.jsp

    <%@ taglib prefix="s" uri="/struts-tags"%>

    <s:iterator value="listTag">
    <s:property value="tags"/>
    </s:iterator>

  3. Write the mapping on struts.xml

    .....
    .....
    <action name="autoTag" class="com.xsis.xklog.web.actions.SannyEntry" method="findTag">
    <result name="success">/pages/sannyEntry/tag.jsp</result>
    </action>
    .....

  4. The final step: Create a JSP that call tag.jsp through struts action. Just like struts' rule, this JSP is also called through struts action.

    .....
    .....
    <script type="text/javascript" src="<%=request.getContextPath()%>/res/js/jquery/lib/jquery.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/res/js/jquery/lib/jquery.bgiframe.min.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/res/js/jquery/lib/jquery.ajaxQueue.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/res/js/jquery/lib/thickbox-compressed.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/res/js/jquery/autocomplete/jquery.autocomplete.js">
    </script>

    <link href="<%=request.getContextPath()%>/res/js/jquery/autocomplete/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
    .....
    .....
    <script type="text/javascript">
    $().ready(function() {
    $("#tag").autocomplete('<%=request.getContextPath()%>/publisher/autoTag.action', {
      multiple: true,
      autoFill: true
    });
    });
    </script>
    .....
    .....
    <s:textfield id='tag' name="tagField" label="tag" />
    .....

Just remember to write the absolute path. I spent 3 days to find out what's wrong with my codes and why jquery-autocomplete cannot run well in Struts2. And it was just about the PATH... In my case, Struts2 failed to read the relative path, so you might want to use the absolute path to make sure everything works as exprected.

Have a nice day, everyone :)

Komentar

  1. wooo .. akhirnya bisa ...

    ntar nyoba dah?

    hmmm .. emang ga bisa baca relative path ya struts nya?

    BalasHapus
  2. hmm yes yes i understand... it's easy...

    BalasHapus
  3. @noval78
    path struts action nya ga kebaca kalo ditulis relative di javascript jquery. Jadi aku main aman aja, semua path ditulis absolute... hehehe!

    @Ansis
    yeaahhh \m/

    BalasHapus
  4. entah kenapa aq merasa kyk orang bego..
    haha...
    jakarta membuatmu semakin keren nak!

    BalasHapus
  5. after coming list and if i pres the down arrow key it going down but it can't see.there is no highlighted line when goes down.....
    pls give me solution if u can as soon as possible
    thanks in advance

    BalasHapus
  6. @Anonymous
    i don't quite understand about your problem.
    do you mean your list doesn't appear at all?
    maybe there's something wrong with your path.
    would you please be more spesific, so we can figure it out.

    BalasHapus
  7. Thanks for the tutorial, it was nice.

    I have a requirement where the drop down should have key, value pair so when user selects the item from the dropdown, I want to validate couple of other fields on the form.

    Do you know how to set the JSON data to the autocompleter and retrieve the data.

    Thanks,
    Suresh

    BalasHapus
  8. @suresh: thanks for reading. well, i don't know much about JSON.. i'm sorry, i can't help you on this. good luck! :)

    BalasHapus
  9. Thanks so much for this post!
    I am new to jQuery, and this gave me the kick in the pants I needed to understand how Struts2 actions can be called using jQuery.
    Great job!

    BalasHapus

Posting Komentar

Postingan populer dari blog ini

Petunjuk ke Bontang, dari Surabaya

bikin SKCK