albert's blog: Building Auto-Completion Using jQuery and JSON

2011/07/22

Building Auto-Completion Using jQuery and JSON

Scenario

As I filled in violation number, system should fill out its related column on onBlur event of violation number(違章編號). [it will return single value, i.e. a Java bean class]

Sequence Diagram

How to do it

nig.nig451.js: will be triggered on onBlur event

  $(document).ready(function() {
      //略....
      $("#vioNumDlg").blur(function() {
       
         $.ajax({
           url: 'NIG451W/autoComplete',
           type: gsAjaxPost,
           data: formData,
           dataType: gsAjaxJson,
           contentType: gsAjaxContentType,
           //略...
           });
      });
  });

NIG451Controller: will be triggered when doing post over 'NIG451W/autoComplete' url pattern

   @RequestMapping(value = "/autoComplete", method = RequestMethod.POST)
   private @ResponseBody
   void autoCompletForm(final NIG451DataBean formBean,
                        final HttpServletResponse response) throws FDCDefineException,
                        IllegalAccessException, InvocationTargetException, IOException {
       //primary key
       Nigt001PK nigt001PK = new Nigt001PK(formBean.getDlvUnit(),
       formBean.getTaxCd(), formBean.getDlvYr(), formBean.getFlgTp(),
       formBean.getSerialNo());
       
       //service class will search by primary key and return a POJO class
       NIG451Bean result = nig451Manager.autoCompleteForNIG451(nigt001PK);
       
       //instantiate JSONObject object, and set result to it.
       JSONObject json = new JSONObject();
       json.put("result", result);
       
       //write json string to HttpServletResponse
       response.setContentType(NigAccessKey.JKEY_CONTENT_TYPE);
       response.getWriter().write(json.toString());
   }

nig.nig451.js:

   $(document).ready(function() {
       //略....
       
       $("#vioNumDlg").blur(function() {
           //略....
           $.ajax({
               url: 'NIG451W/autoComplete',
               type: gsAjaxPost,
               data: formData,
               dataType: gsAjaxJson,
               contentType: gsAjaxContentType,
               success: function(jsonResult, status) {
                   //get values from json result
                   //syntax: jsonResult.[key value we set in JSON].[bean class attribute]
                   $("#manageCd").val(jsonResult.result.manageCd);
                   $("#vioYr").val(jsonResult.result.vioYr);
                   $("#vioHostNm").val(jsonResult.result.vioHostNm);
                   $("#vioHostIdnBan").val(jsonResult.result.vioHostIdnBan);
                   $("#respNm").val(jsonResult.result.respNm);
                   $("#respIdn").val(jsonResult.result.respIdn);
                   $("#respAddr").val(jsonResult.result.respAddr);
               },
               error: function(xhrInstance, status, xhrException) {
               }
           });
       });
   });

NIG451W.jsp

Check the result

albert's blog

Total Pageviews

2011/07/22

Building Auto-Completion Using jQuery and JSON

No comments: