이때 데이터가 하나도 없을 경우 null로 뱉어주면(물론 php에서 한개도 없을때도 json을 그렇게 만들어주면 문제 없겠지만)
문제점
1.ie6에서는 일단. length' is null or not an object 에러를 뱉어낸다.(당연히 널오브젝트.length하니 그러하겠지)
2.autocomplete를 달아놓은 input 박스의 로딩 이미지를 추가했따고 치면
없을경우는 이놈이 무한히 도는 문제가 생긴다.
1.php 코드
어쩌구 저쩌구 하여
젤 마지막 단에
die( json_encode( $data ) ); 로 뱉어준다고 치자.
2.css 코드(autocomplete시 input 박스에 로딩이미지 보여주기 위한.)
<style>
.ui-autocomplete-loading
{
background: white url('.image/autocompleteloading.gif') right center no-repeat;
}
</style>
3.js 코드
$( "#input_search" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "./어쩌구.php",
dataType: "json",
type:"POST",
data: {
word: $("#input_search").val()
},
success: function( data ) {
response( $.map( data, function( item ) {
return {
label: item.label,
info: item.info,
strs:item.strs,
gubun:item.item.gubun
}
}));
}
});
},
minLength: 2,
select: function( event, ui ) {
},
open: function() {
$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
},
close: function() {
$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
}
}).data( "autocomplete" )._renderItem = function( ul, item ) {
//custom ui를 위한.
return $( "<li style='text-align:left'></li>" )
.data( "item.autocomplete", item )
.append( "<a onclick='javascript:void'>"+ $.trim(item.label).replace(new RegExp('(' + $.trim(this.term) + ')', 'gi'), "<span style='font-weight:bold;color:Blue;'>$1</span>")+"</a><label style='display:none'>"+item.info+"</label><label style='display:none'>"+item.gubun+"</label>" )
.appendTo( ul );
};
이렇다고 칠 때
경우 1.php에서 json으로 날려주는 부분에 데이터가 한개이상 즉 머라도 있으면 아무 문제가 안생기고
잔버그도 없다.
경우 2.php에서 json으로 날려주는 부분에 데이터가 없는경우 즉 php에서는 null로 뱉어주겠지
그럴때 위에 말한 두가지 경우가 생긴다.
다시 한번 적어보면
문제점
1.ie6에서는 일단. length' is null or not an object 에러를 뱉어낸다.(당연히 널오브젝트.length하니 그러하겠지) -> 진행상에 문제는 없음 2번이 문제.
2.autocomplete를 달아놓은 input 박스의 로딩 이미지를 추가했다고 치면
없을경우는 이놈이 무한히 도는 문제가 생긴다.
해결방법.
1.php에서 die(json) 전에 처리 해준다.
if( count($data) == 0 )
{
echo "[]";
return;
}
즉 없는 경우[]로 뱉어준다.
2.autocomplete에서 처리해준다. 아래 빨간 부분 추가
null일 경우 json 데이터를 빈값으로 바꿔주고 아래는 그냥 하던 코드 그대로 하면
위쪽 두가지 잔버그가 해결 됨. 난 서버단에 멀 추가해주기 그래서 걍 2번방법으로 했음.
$( "#input_search" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "./어쩌구.php",
dataType: "json",
type:"POST",
data: {
word: $("#input_search").val()
},
success: function( data ) {
//이부분 추가if(data == null)
{
data = {};
}
response( $.map( data, function( item ) {
return {
label: item.label,
info: item.info,
strs:item.strs,
gubun:item.item.gubun
}
}));
}
});
},
minLength: 2,
select: function( event, ui ) {
},
open: function() {
$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
},
close: function() {
$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
}
}).data( "autocomplete" )._renderItem = function( ul, item ) {
//custom ui를 위한.
return $( "<li style='text-align:left'></li>" )
.data( "item.autocomplete", item )
.append( "<a onclick='javascript:void'>"+ $.trim(item.label).replace(new RegExp('(' + $.trim(this.term) + ')', 'gi'), "<span style='font-weight:bold;color:Blue;'>$1</span>")+"</a><label style='display:none'>"+item.info+"</label><label style='display:none'>"+item.gubun+"</label>" )
.appendTo( ul );
};