ทำ Autocomplete ด้วย Jquery Call Ajax ผ่าน Spring MVC  สร้างคำถาม

 2,857 view  หมวดหมู่ : สำหรับโปรแกรมเมอร์  วันที่สร้าง : 26/03/2013

ทำ 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;
    }   

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


ถ้าชอบบทความนี้ กด Like เลย :ทำ Autocomplete ด้วย Jquery Call Ajax ผ่าน Spring MVC

 2,857 view  หมวดหมู่ : สำหรับโปรแกรมเมอร์  วันที่สร้าง : 26/03/2013



SOA,Java,XSLT

 ร่วมแสดงความคิดเห็นได้ที่นี่

#1.    เอก
@ เป็น Request ครับ Parameter
ทางฝั่ง server สามารถ get value ได้จาก

request.getParameter("name_startsWith")

ส่วน request.term คือค่าที่เรากรอกใน text box ที่จะทำ autocomplete ครับ

...............................................



× แจ้งเตือน! เราสนับสนุนทุกความคิดเห็น ที่ ใช้ถ้อยคำสุภาพ ไม่ละเมิดผู้อื่น ไม่ก่อให้เกิดความขัดแย้ง

เนื้อหาที่เกี่ยวช้อง

  Oracle PIPELINED คืออะไร ใช้งานยังไงครับ ถามเมื่อ (2011-09-21)   2,870 views  (ดูล่าสุดเมื่อ 7 นาที)

  Java clone Object ด้วย Cloneable ถามเมื่อ (2018-06-03)   1,484 views  (ดูล่าสุดเมื่อ 11 นาที)

  Java แปลง Array เป็น List ถามเมื่อ (2013-05-29)   3,016 views  (ดูล่าสุดเมื่อ 13 นาที)

  ลบ ไฟล์ SThumbDB tdb ที่อยู่ใน MEMORY CARD ของโทรศัพท์ samsung ไม่ได้ครับ ช่วยบอกวิธี ลบ ที ครับ ถามเมื่อ (2011-08-04)   3,870 views  (ดูล่าสุดเมื่อ 15 นาที)

  Java JSON simple สร้างและ Parser JSON ง่ายๆ ผ่าน JSONParser บน ถามเมื่อ (2015-08-27)   1,933 views  (ดูล่าสุดเมื่อ 16 นาที)

  Software Release Process คืออะไร ถามเมื่อ (2016-05-23)   2,537 views  (ดูล่าสุดเมื่อ 19 นาที)

  ORACLE alter table not null ยังไงครับ ถามเมื่อ (2017-11-10)   1,334 views  (ดูล่าสุดเมื่อ 24 นาที)

  BOWER คืออะไร หาคำตอบได้ที่นี่ ถามเมื่อ (2015-09-30)   1,927 views  (ดูล่าสุดเมื่อ 24 นาที)

  Java Hashmap ขอตัวอย่างการใช้ HashMap ด้วยค่ะ ถามเมื่อ (2013-12-11)   2,475 views  (ดูล่าสุดเมื่อ 25 นาที)

  Java Read Folder ขอตัวอย่าง Code Java ในการอ่านไฟล์ใน Folder ครับ ถามเมื่อ (2012-09-25)   2,325 views  (ดูล่าสุดเมื่อ 27 นาที)


 

บ้านเดียวกันดอทคอม เว็บถามตอบ รวมทุกเรื่องที่คุณอยากรู้ ให้ความรู้ ความบันเทิง มีสาระ
www.ban1gun.com