[PHP + JS] select2 data ajax 처리

select2 플러그인에 대한 정보는 아래 사이트 참고

select2 사이트 : https://select2.org/ 

아래는 ajax로 30건씩 데이터를 불러오며, select 영역 최하단으로 스크롤 시 추가로 30건씩 불러오는 코드이다.

(ajax로 데이터를 불러와야 할 경우, option으로 출력될 데이터 로우가 많아서 속도가 지연되는 경우 참고)

* script

$('.js-example-basic-single').select2({

ajax: {

url: './ajax.php',

delay: 250,

dataType: 'json',

data: function(params) {

return {

search: params.term || '',

page: params.page || 1

}

},

processResults: function (data, params) {

params.page = params.page || 1;

var more = (params.page * 30) < data.total_count; // whether or not there are more results available

return {

results: data.result,

pagination: { more: more }

};

}

}

});

- delay : ajax 통신 지연 시간 (지정해주지 않으면 키 입력할때마다 ajax 페이지 호출함)

- params.term : select2 input에 입력한 검색어

* ajax.php 일부

$sql_where = $search ? ' WHERE col REGEXP \''.$search.'\'' : '';

$total_count = sql_fetch('SELECT COUNT(idx) AS cnt FROM tb '.$sql_where.' ORDER BY NULL');

$final_result['total_count'] = $total_count['cnt'];

$from_record = ($page - 1) * 30; // 시작 열

$sql = 'SELECT idx, col FROM tb '.$sql_where.' ORDER BY col ASC LIMIT '.$from_record.', 30';

$result = sql_query($sql);

while($row = sql_fetch_array($result)){

$final_result['result'][] = array('id' => $row['idx'], 'text' => $row['col']);

}

header('Content-Type: application/json');

echo json_encode($final_result);

- $search, $page : 넘겨받은 값

- $final_result : 넘겨줄 값