siteslave · December 16, 2013 03:29
diff --git a/select2_ajax.html b/select2_ajax.html
 <!DOCTYPE html>
 <html>
 <head>
  <title>Bootstrap 101 Template</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="../assets/css/bootstrap.min.css" rel="stylesheet">
  <script src="../assets/js/jquery.js"></script>
  <script src="../assets/js/bootstrap.min.js"></script>
  <script src="dist/select2.min.js"></script>
  <script src="dist/select2.locale.th.js"></script>
  <link href="dist/select2.css" rel="stylesheet">
  <link href="dist/select2.bootstrap.css" rel="stylesheet">
 </head>
 <body style="padding: 10px;">
 <form action="#">
  <p>
    <input type="hidden" id="sl_hospitals" style="width: 300px;">
    <button type="button" class="btn btn-primary" id="btn_show">
      แสดงรายการ
    </button>
  </p>
 </form>
 <script>
  $('#sl_hospitals').select2({
    placeholder: 'พิมพ์ชื่อ หรือ รหัสหน่วยบริการ',
    minimumInputLength: 2,
    allowClear: true,
    ajax: {
      url: 'http://localhost/hospitals.php',
      dataType: 'jsonp',
      type: 'GET',
      quietMillis: 100,
      data: function (term, page) {
        return {
          query: term,
          start: page,
          stop: 10
        };
      }, results: function (data, page) {
        var more = (page * 10) < data.total;
        return { results: data.rows, more: more };
      }
    }, id: function(data) { 
      return { id: data.code } 
    }, formatResult: function(data) {
      return '[' + data.code + '] ' + data.name;
    }, formatSelection: function(data) {
      return '[' + data.code + '] ' + data.name;
    }
  });
  $('#btn_show').on('click', function(e) {
    e.preventDefault();
    var obj = $('#sl_hospitals').select2('data');
    if( obj === null ) {
      alert( 'กรุณาเลือกรายการ' );
    } else {
      alert( obj.code + ' ' + obj.name );
    }
  });
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Bootstrap 101 Template</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
	<script src="../assets/js/jquery.js"></script>
	<script src="../assets/js/bootstrap.min.js"></script>
	<script src="dist/select2.min.js"></script>
	<script src="dist/select2.locale.th.js"></script>
	<link href="dist/select2.css" rel="stylesheet">
	<link href="dist/select2.bootstrap.css" rel="stylesheet">
	</head>
	<body style="padding: 10px;">
	<form action="#">
	<p>
	<input type="hidden" id="sl_hospitals" style="width: 300px;">
	<button type="button" class="btn btn-primary" id="btn_show">
	แสดงรายการ
	</button>
	</p>
	</form>
	<script>
	$('#sl_hospitals').select2({
	placeholder: 'พิมพ์ชื่อ หรือ รหัสหน่วยบริการ',
	minimumInputLength: 2,
	allowClear: true,
	ajax: {
	url: 'http://localhost/hospitals.php',
	dataType: 'jsonp',
	type: 'GET',
	quietMillis: 100,
	data: function (term, page) {
	return {
	query: term,
	start: page,
	stop: 10
	};
	}, results: function (data, page) {
	var more = (page * 10) < data.total;
	return { results: data.rows, more: more };
	}
	}, id: function(data) {
	return { id: data.code }
	}, formatResult: function(data) {
	return '[' + data.code + '] ' + data.name;
	}, formatSelection: function(data) {
	return '[' + data.code + '] ' + data.name;
	}
	});
	$('#btn_show').on('click', function(e) {
	e.preventDefault();
	var obj = $('#sl_hospitals').select2('data');
	if( obj === null ) {
	alert( 'กรุณาเลือกรายการ' );
	} else {
	alert( obj.code + ' ' + obj.name );
	}
	});
	</script>
	</body>
	</html>