ทำ Autocomplete ด้วย Jquery Call Ajax ผ่าน Spring MVC

หลังจากนำเสอนวิธีการ Call Ajax ด้วย Jquery กับ Spring framework แล้ว
ว้นนี้จะนำเสอน การประยุกต์ใช้งานที่ Advance มากขึ้น ด้วยการทำ Autocomplete

ก่อนอื่น import script jquery ตามด้านล่าง

    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/ui/jquery.ui.core.js"></script>
    <script src="js/ui/jquery.ui.widget.js"></script>
    <script src="js/ui/jquery.ui.position.js"></script>
    <script src="js/ui/jquery.ui.menu.js"></script>
    <script src="js/ui/jquery.ui.autocomplete.js"></script>

จากนั้นแทรก Script javascript เข้าไปครับ

  <script>
    $(function() {
        function log( message ) {
            $( "<div>" ).text( message ).prependTo( "#log" );
            $( "#log" ).scrollTop( 0 );
        }

        $( "#city" ).autocomplete({
            source: function( request, response ) {
                $.ajax({
                    url: "statoinAutoComplete.html",
                    type: "post",
                    dataType: "json",
                    data: {
                        maxRows: 12,
                        name_startsWith: request.term
                    },
                    //contentType: "application/x-www-form-urlencoded;charset=UTF-8",
                    success: function( data ) {
                        response( $.map( data.data_list, function( item ) {
                            return {
                                label: item.stName,
                                value: item.stName
                            }
                        }));
                    }
                });
            },
            minLength: 1,
            select: function( event, ui ) {
                log( ui.item ?
                    "Selected: " + ui.item.label :
                    "Nothing selected, input was " + this.value);
            },
            open: function() {
                $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
            },
            close: function() {
                $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
            }
        });
    });
  </script>

HTML ที่ใช้ Display ตามด้านล่างครับ

<div class="ui-widget">
    <label for="city">Your city: </label>
    <input id="city" name="city">
</div>

<div class="ui-widget" style="margin-top:2em; font-family:Arial">
    Result:
    <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>



ในฝั่งของ Spring framework ก็สร้าง Model ปรกติครับ

    public ModelAndView statoinAutoComplete(HttpServletRequest request, HttpServletResponse response) {
        ModelAndView mv=new ModelAndView("ajax_xx");  
        try {
            List<MasterDto> dataList=this.getModel().getDataSearch(request);
            mv.addObject("data_list",dataList);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return mv;
    }   

คร่าวๆ ตามนี้นะครับสงสัยตรงใหน โพสถามเอาละกันเนอะ