Today I created a nice autocomplete box with ajax and springframework. In my backoffice application I want to be able to select a product for an orderline. The moment I start typing valid options should be retreived from the database. Since I am creating a spring mvc application, so the ajax stuff must be incorporated into the spring application.

What did I use?

I used the ajaxtag project libraries and spring framework to do the ajax stuff. There are a few things to do, I am not going to give a lot of detais, have a look at the samples for a more thorough sample.

jsp to show form


1. <input type="text"
2. name="neworderlineproductshortcode"
3. id="neworderlineproductshortcode"
4. value=""
5. size="10"
6. class="form-autocomplete"
7. onkeypress="if (event.keyCode==13) return false;"/>
8. <input type="text"
9. name="neworderlineproductshortcodename"
10. id="neworderlineproductshortcodename"
11. value=""
12. size="40"
13. readonly="readonly"
14. class="readonly"/>
15.
16.<ajax:autocomplete
17. source="neworderlineproductshortcode"
18. target="neworderlineproductshortcodename"
19. baseUrl="${ctx}/autocompleteProduct.html"
20. className="autocomplete"
21. parameters="neworderlineproductshortcode={neworderlineproductshortcode}"
22. progressStyle="throbbing"
23. minimumCharacters="1" />

The code is just like the example, do have a look at line 7, this is a work around to make the enter key work. Actually this is all there is to it to make the ajax part work at the client. Pretty cool stuff. This image shows the webpage this autocomplete is on.

autocompletescreendump

Where does spring come in?

From the line number 19 in the previous code sample we can see that the view ‘autocompleteProduct.html’ is used to get the ajax popup. We use an abstract controller that gathers the products from the service layer. Then it returns a ModelAndView to the following class:

1. package nl.primatras.backoffice.web.view;
2.
3. import java.util.List;
4. import java.util.Map;
5.
6. import javax.servlet.ServletOutputStream;
7. import javax.servlet.http.HttpServletRequest;
8. import javax.servlet.http.HttpServletResponse;
9.
10.import nl.primatras.backoffice.domain.Product;
11.
12.import org.ajaxtags.helpers.AjaxXmlBuilder;
13.import org.springframework.web.servlet.view.AbstractView;
14.
15.public class AutocompleteProductsView extends AbstractView {
16.
17. protected void renderMergedOutputModel(Map model,
18. HttpServletRequest request, HttpServletResponse response)
19. throws Exception {
20. response.setContentType("text/xml");
21. response.setHeader("Cache-Control", "no-cache");
22.
23. List products = (List)model.get("products");
24.
25. String xml = new AjaxXmlBuilder().addItems(products,"shortCode","name").toString();
26.
27. ServletOutputStream out = response.getOutputStream();
28. out.print(xml);
29. out.close();
30. }
31.
32.}

Interesting lines in this source code are:

  • 20, ajax wants to have xml content to do his thing, so set the content type for the response.
  • 25, create an xml string with the help of the AjaxXmlBuilder utility class.

Actually that is all there is to it.

Doing ajax with ajaxtags and springframework