Dynamic Select2 dropdown in bootstrap PHP codeigniter.

Using JS Plugin select2 for dropdown

PHP Codeigniter view file Code

 <?php
        //echo form_dropdown('select_employee', [], set_value('select_employee', ''), 'id="select_employee" data-placeholder="Choose One" title="Please select at least 1 area" class="select2"');
        $select_employee = array('type' => 'text', 'name' => 'issueto', 'id' => 'select_employee',  'value' => set_value('select_employee'));
        echo form_input($select_employee);
        echo form_error('select_employee');
?>

PHP Server Side code

public function issueholder_name()
    {
        $this->load->model('Osi_model');
        $bdn = $this->input->post("regimental_no");
        //var_dump($bdn);
        //$user = $this->Btalion_model->fetchinfolike('newosi', array('depttno' => $bdn),array('bat_id'=>0));
        if($this->input->post('limit')!=null)
            $limit = $this->input->post('limit');
        else
            $limit = 10;
        if($this->input->post('page')!=null){
            $page = $this->input->post('page');
        }else{
            $page = 1;
        }
        $start = ($page-1)*$limit;
        /*if($this->input->post('start')!=null)
            $start = $this->input->post('start');
        else
            $start = 0;*/
        $user = $this->Osi_model->getEmployees(array('regimental_no'=>$bdn,'battalions'=>$this->input->post('battalions')),$limit,$start);
        $rows =[];
        foreach ($user as $value) {
            $rows[] = ['id'=>$value->man_id,'text'=>"<p class='btn btn-xs btn-success' id='a" . $value->man_id . "' data-input='" . $value->man_id . "'><strong>Battalion: </strong>" . $value->nick . " &nbsp; <strong>Name: </strong>" . $value->name . "&nbsp; <strong>Dept No: </strong>" . $value->depttno . "&nbsp; <strong>Mobile: </strong>" . $value->phono1 . "</p>"];
            //var_dump($value);die;
            //$val = $this->Btalion_model->fetchoneinfo('users', array('users_id' => $value->bat_id));
            /*if ($val != '') {*/
                //echo '<p class="btn btn-xs btn-success" id="a' . $value->man_id . '" data-input="' . $value->man_id . '"><strong>Battalion: </strong>' . $value->nick . ' &nbsp; <strong>Name: </strong>' . $value->name . '&nbsp; <strong>Dept No: </strong>' . $value->depttno . '&nbsp; <strong>Mobile: </strong>' . $value->phono1 . '</p><br/><br/>';
            /*} else {
                echo '<p class="label label-success" id="a' . $value->man_id . '"><strong>Battalion: </strong>' . $val->nick . '<strong>Name: </strong>' . $value->name . '&nbsp; <strong>Dept No: </strong>' . $value->depttno . '&nbsp; <strong>Mobile: </strong>' . $value->phono1 . '&nbsp; <strong>Battalion: </strong>' . '</p><br/><br/>';
            }*/
        }
        header('Content-Type: application/json');
        if(count($rows)==0){
            $more = false;
        }else{
            $more = true;
        }
        echo json_encode(['results'=>$rows,'more'=>$more] ,JSON_UNESCAPED_SLASHES);
        die;
    }

 Jquery CODE

$('#select_employee').select2({
          width: "100%",
          placeholder: "Select Employee By Entering Belt No",
          allowClear: true,
          escapeMarkup: function (text) { return text; },
          ajax: {
              url: "<?php echo base_url('bt-issueholder-name'); ?>",
              type:"POST",
              data: function (params,page,d) {
                console.log(params);
                console.log(page);
                console.log(d);
                var query = {
                  regimental_no: params,
                  battalions: $('#batslis').val(),
                  type: 'public',
                  page:page,
                }
                // Query parameters will be ?search=[term]&type=public
                return query;
              },
              results: function (data,page,params) {
                console.log('dta',data);
                console.log('params',params);
                console.log('page',page);
                params.page = params.page+1;
                /*data.results.map(function(value,key){
                  console.log(key);
                  console.log(value);
                  data.results[key].text = '&lt;p&rt;HELLO&lt;/p&rt;';
                })*/
                //return {"results":[{"id":"260","text":"<p class='btn btn-xs btn-success' id='a260' data-input='260'><strong>Battalion: </strong>75th,Bn.,PAP &nbsp; <strong>Name: </strong>Ram Avtar&nbsp; <strong>Dept No: </strong>865/W&nbsp; <strong>Mobile: </strong>9878444388</p><br/><br/>"},{"id":"266","text":"<p class='btn btn-xs btn-success' id='a266' data-input='266'><strong>Battalion: </strong>27th.Bn.,PAP &nbsp; <strong>Name: </strong>Sucha Singh&nbsp; <strong>Dept No: </strong>367/PAP&nbsp; <strong>Mobile: </strong>9815200367</p><br/><br/>"},{"id":"267","text":"<p class='btn btn-xs btn-success' id='a267' data-input='267'><strong>Battalion: </strong>RTC.PAP &nbsp; <strong>Name: </strong>Kuldeep Singh&nbsp; <strong>Dept No: </strong>340/PAP&nbsp; <strong>Mobile: </strong>8725041065</p><br/><br/>"},{"id":"269","text":"<p class='btn btn-xs btn-success' id='a269' data-input='269'><strong>Battalion: </strong>80th,Bn.,PAP &nbsp; <strong>Name: </strong>Rajinder Singh&nbsp; <strong>Dept No: </strong>530/PAP&nbsp; <strong>Mobile: </strong>9878680380</p><br/><br/>"},{"id":"274","text":"<p class='btn btn-xs btn-success' id='a274' data-input='274'><strong>Battalion: </strong>75th,Bn.,PAP &nbsp; <strong>Name: </strong>Sukhdev Singh&nbsp; <strong>Dept No: </strong>258/PAP&nbsp; <strong>Mobile: </strong>9779587107</p><br/><br/>"},{"id":"282","text":"<p class='btn btn-xs btn-success' id='a282' data-input='282'><strong>Battalion: </strong>80th,Bn.,PAP &nbsp; <strong>Name: </strong>Sukhwinder Singh&nbsp; <strong>Dept No: </strong>213/PAP&nbsp; <strong>Mobile: </strong>9417637080</p><br/><br/>"},{"id":"295","text":"<p class='btn btn-xs btn-success' id='a295' data-input='295'><strong>Battalion: </strong>80th,Bn.,PAP &nbsp; <strong>Name: </strong>Brij Lal&nbsp; <strong>Dept No: </strong>12/PAP&nbsp; <strong>Mobile: </strong>9872399899</p><br/><br/>"},{"id":"296","text":"<p class='btn btn-xs btn-success' id='a296' data-input='296'><strong>Battalion: </strong>75th,Bn.,PAP &nbsp; <strong>Name: </strong>Jorawer Singh&nbsp; <strong>Dept No: </strong>1254/PAP&nbsp; <strong>Mobile: </strong>9815850271</p><br/><br/>"},{"id":"297","text":"<p class='btn btn-xs btn-success' id='a297' data-input='297'><strong>Battalion: </strong>13th.Bn.,PAP &nbsp; <strong>Name: </strong>Bhajan Lal&nbsp; <strong>Dept No: </strong>1491/PAP&nbsp; <strong>Mobile: </strong>9464769297</p><br/><br/>"},{"id":"298","text":"<p class='btn btn-xs btn-success' id='a298' data-input='298'><strong>Battalion: </strong>75th,Bn.,PAP &nbsp; <strong>Name: </strong>Satnam Singh&nbsp; <strong>Dept No: </strong>2/PAP&nbsp; <strong>Mobile: </strong>9463482804</p><br/><br/>"}],"pagination":{"more":true}};
               
                return data;
                // Transforms the top-level key of the response object from 'items' to 'results'
                /*return {
                  results: data.items
                };*/
              }
            }
        });
      });

Comments