【问题标题】:speed up select2 using ajax with php使用 ajax 和 php 加速 select2
【发布时间】:2015-09-23 13:15:02
【问题描述】:

我正在尝试加快我的 select2 结果,因为我在数据库中有超过六千名客户。我的输入框充满了来自 mysql 数据库的数据,老实说,我不知道在这个阶段我还能尝试什么。这是我的 select2 javascript(Js 不是我的东西)

   <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

在 php 中,我使用一个 foreach 循环来读取数据。它在没有 ajax 的情况下完美运行,只是选择结果会很慢,而且每天都会添加更多的客户。我尝试发回 id 和客户全名。

<?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
      ?>

【问题讨论】:

  • 你在同一页面上同时显示6k条记录? ...
  • 不显示所有客户。如果名称超过 3 个字母,请使用至少需要 3 个字母的搜索。每次搜索限制在 50 个左右的客户。还要使用适当的索引和缓存服务器端和客户端。
  • 好吧,我使用分页来每页显示 150 个结果。但是想通过 6k 搜索得到我输入的客户

标签: javascript php ajax jquery-select2


【解决方案1】:

由于记录太多需要太多时间,避免建议是

  1. 利用分页或

  2. 通过触发多个 ajax 请求来利用并行执行,即请求一个获取 1 到 3000 个数据,并行请求获取 3001 到 6000 个数据..

示例代码:可能有语法错误

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
          })
        })
      }

【讨论】:

  • 好的,当我做结果时:推送数据行它会破坏选择,只在文本框中显示所有客户的列表而无需输入。刚刚注意到当我 var_dump $jsData 它就像 array(2) { ["id"]=> NULL ["fullName"]=> string(15) "3Yvonne Meahady" } 它显示 id=null?但是id在foreach中有效吗?我错过了什么吗?
猜你喜欢
  • 2017-06-25
  • 1970-01-01
  • 2015-08-24
  • 1970-01-01
  • 1970-01-01
  • 2019-09-01
  • 2015-05-12
  • 1970-01-01
  • 2015-08-22
相关资源
最近更新 更多