ทำ 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;
}
คร่าวๆ ตามนี้นะครับสงสัยตรงใหน โพสถามเอาละกันเนอะ