jquery select2 셀렉트박스의 좋은확장.

셀렉트박스를 파워풀하게 만들어줄 jquery 확장

http://ivaynberg.github.io/select2/

사용법도 간단합니다.

요건 회원수가 많아져서 ajax 방식으로 바꾼 캡쳐화면임..

기본적으로 jquery 가 필요

select2.js / select2.css 도 인클루드 해야합니다.

+ 기본적인사용

html

<select name='user_no' id="user_list" style='width:98%;font-size:11px;' >

<option value='1'>1번유저</option>

<option value='2'>2번유저</option>

<option value='3'>3번유저</option>

</select>

스크립트부분

---------------------------------

$("#user_list").select2({

placeholder: "유저를 선택하세요",

allowClear: true

});

---------------------------------------

+ 확장사용 : ajax / array / json 등 사용가능 셀렉트박스내부모양을 html로 꾸밀수있음

예제는 위의 캡쳐에 쓰인것.

html

<input type="hidden" name='user_no' id="user_list2" style='width:300px;font-size:11px;' />

스크립트

-------------------------

$("#user_list2").select2({

  placeholder: "유저를 검색후 선택하세요(이름,아이디,닉네임)",

  allowClear: true,

  minimumInputLength: 2,

  ajax: {

    url: "./apps/ajax_member_select2.php",

    dataType: 'json',

    quietMillis: 500,

    data: function (term, page) {

        //console.log(term);

      return {

        q: term, //search term

        page_limit: 10, // page size

        page: page, // page number

      };

    },

    results: function (data, page) {

      //console.log(data);

      var more = (page * 10) < data.total;

      return {results: data.users, more: more};

    }

  },

  escapeMarkup: function (m) { return m; }

});

-------------------------------------------------------------

php ajax 부분도 첨부합니다.

<?

include_once("./_common.php");

$_q = trim($_GET["q"]);

if (!$_q) return;

$_qry = "SELECT * FROM member WHERE user_id like '{$_q}%' OR user_name like '%{$_q}%' OR user_nick  LIKE '%{$_q}%'  ";

$_res = sql_query($_qry);

$_data = array();

$_seq=0;

while($_rs = sql_fetch_array($_res)){

    $_name = array(

        'id'=>$_rs['user_no']

        ,'text'=> $_rs['user_name']."(".$_rs['user_nick'].",".$_rs['user_id'].")"

    );

    $_data[$_seq] = $_name;

    $_seq++;

}

header("content-type: text/json");

$_result['total'] = count($_data);

$_result['users'] = $_data;

echo json_encode($_result);

exit;

?>

php reesult json

{total: 1,users: [{id: "96",text: "testman(testman,test@test.com)"}]}