How to make Select2 infitine scroll pagination on server side and client side -

on documentation page there no server side explanation. im confused, want solve problem , maybe make reference server side , client side code.

i'm trying make select2 (using v.4.0) infinite scroll pagination searchbox, confused params.page. how can parameter query request , return page number infinite scroll. how infinite scroll triggers? below codes can 10 results.

html part of code is;

<select id="search_products" name="q"></select> 

js part is;

jquery('#search_products').select2({             ajax: {         url: "search_results.php",         datatype: 'json',         delay: 250,         data: function (params) {           return {             q: params.term, // search term             page_limit: 10,             page:params.page           };         },          processresults: function (data, params) {          params.page = params.page || 1;          return {           results: data.items,           pagination: {             more: (params.page * 30) < data.total                      }         };        },                     cache: true       },       escapemarkup: function (markup) { return markup; },       minimuminputlength: 3,       templateresult: formatrepo,       templateselection: formatreposelection });  function formatrepo (repo) {     if (repo.loading) return repo.adi;      var markup = '<div class="clearfix">' +             '<div class="col-sm-7">' + repo.name + '</div>' +     '<div class="col-sm-4"><i class="fa fa-barcode"></i> ' + repo.barkod + '</div>';      return markup;   }    function formatreposelection (repo) {     return repo.adi;   } 

server side - php part (search_results.php) is:

if (isset($_request['q']) && !empty($_request['q'])) {      $q = getvar('q', 'anp'); //getvar custom sanitation function     $pglm = getvar('page_limit', 'int');     $page_lim = (empty($pglm) ? 10 : $pglm);     $pg = getvar('page', 'int');     $page =  (empty($pg) ? 0 : $pg);     $sira = $page*$page_lim;      //using mysql, querying custom database query class $db     $qu = $db->get_results("                     select *  `products`                       `adi`  '%$q%'                     or  `ozellikleri`  '%$q%'                     or  `ozet`  '%$q%'                     or  `barkod`  '%$q%' limit $sira, $page_lim                     ");      if($qu && count($qu) > 0) {         foreach ($qu $oqu) {             $items[] = array('name' => $oqu->adi, 'id' => $oqu->id,  'barkod' => $oqu->barkod);             }           echo json_encode(array('items' => $items, 'total' =>  count($qu), 'page' => $page));     }    } 

there's issues on code, both on client-side , server-side.

on client-side, try replacing this:

data: function (params) {     return {         q: params.term, // search term         page_limit: 10,         page:params.page     }; }, processresults: function (data, params) {     params.page = params.page || 1;     return {         results: data.items,         pagination: {             more: (params.page * 30) < data.total                    }     } }; 

for this:

var limit_rows = 10; ... data: function (params) {     return {         q: params.term, // search term         page_limit: limit_rows,         page:params.page     }; }, processresults: function (data, params) {     params.page = params.page || 1;     return {         results: data.items,         pagination: {             more: (params.page * limit_rows) < data.total                    }     } }; 

that way, select2 parse page limit correctly, accordingly "limit_rows" variable. notice changed 30 "limit_rows" var, inside "processresults" method, , field shows correctly 10 results per search.

on server-side, 2 issues:

• your total count wrong. need return total rows without limit on query. that'll avoid return total value page limit (in case, 10).

• your array being returned json missing info. try changing this:

  echo json_encode( array( 'items' => $items, 'total' => count($qu), 'page' => $page) );

for this:

echo json_encode(     array(         'incomplete_results' => false,         'items' => $items,         'total' => count($qu) // total rows without limit on sql query ); 

that worked me.