Cormac Hallinan
Cormac Hallinan

Reputation: 187

speed up select2 using ajax with php

I am trying to speed up my select2 results as i have over six-thousand customers in the database. I have the input box filled with data from a mysql database and dont know what more I can try at this stage to be honest. here is my select2 javascript (Js just isnt my thing)

   <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
  <script type="text/javascript">
  $(function(){
  // turn the element to select2 select style
$(".js-data-example-ajax").select2(
  {
     ajax: {
        url: "/delete.php",
        dataType: 'json',
        data : function(term){
          return{
            term: term
          };
        },
      results: function(data){
        var results = <?php echo json_encode($jsData) ?>;
        $.each(data, function(index, item){
          results.push({
            id: item.id,
            text: item.fullName
          })
        })
      }
    }

  });//end select2
});//end function

in php I use a foreach loop to read the data. It works perfect without the ajax just can be very slow select a result and there will be more customers added every day. I try to send back the id and the customers full name.

<?php
    $sqlSearch="SELECT first_name, last_name, id, mobile, landline FROM customer order by first_name"; 
      echo "<select id='tbCustId' class='js-data-example-ajax' style='width: 150px' size='2' name='tbCustId' required></option>";
     // echo "<select>";
      $jsData = [];

      foreach ($db->query($sqlSearch) as $row){
          $id = $row["Id"];
          $fName = $row["first_name"];
          $sName = $row["last_name"];
          $fullName = $fName ." ". $sName;

      $jsData[] = [
      "id" => $id;
      "fullName" => $fullName;
      ];


      echo "<option value=$row[id]>
      $fullName
      </option>";     
      }
      echo "</select><br/>";// Closing of list box
      ?>

Upvotes: 1

Views: 1207

Answers (1)

Pranay Rana
Pranay Rana

Reputation: 176934

As there are too many records it taking too much time , to avoid suggestion is

  1. Make use of Pagination or

  2. Make use of parallel execution by firing multiple ajax request i.e. request one fetch 1 to 3000 data and parallel request fetch 3001 to 6000 data..

Example Code : might having syntax error

ajax: {
        url: "/delete.php",
        dataType: 'json',
        data : function(term){
          return{
            term: term
            //record no : 1 added parameter for paging
            //record no : 3000
          };
        },
      results: PushData
    }


ajax: {
        url: "/delete.php",
        dataType: 'json',
        data : function(term){
          return{
            term: term
            //record no : 3001 added parameter for paging
            //record no : 6000
          };
        },
      results: PushData
    }



function PushData(data){
        var results = <?php echo json_encode($jsData) ?>;
        $.each(data, function(index, item){
          results.push({
            id: item.id,
            text: item.fullName
          })
        })
      }

Upvotes: 3

Related Questions