带有无限滚动的 Jquery UI 自动完成答案

【问题标题】：Jquery UI autocomplete w/Infinite scroll带有无限滚动的 Jquery UI 自动完成
【发布时间】：2017-08-28 16:24:58
【问题描述】：

我正在尝试在我的自动完成文本框中加载更多滚动数据当用户向下滚动时，它将像分页根据需要加载更多结果。

类似this。

我已经找了很长时间了发现类似我的问题的问题。

       <div class="ui-widget">
              <label for="tags">Enter Company Name: </label>
              <input id="tags" class="form-control">
            </div>

    <script> 
 $( function() {
        $( "#tags" ).autocomplete({
            source: 'function/all_company_auto.php'
        });
      } );
</script>

这是我的 php 代码。

<?php
$get_company = "SELECT DISTINCT companies.company
        FROM companies
        INNER JOIN target_details
        ON companies.company_id = target_details.company_id
        WHERE companies.company LIKE \"%$company%\"
        LIMIT 100 OFFSET 10
        ";
        if($run_company = $conn->query($get_company)){
            while($row = $run_company->fetch_assoc()){
                $data[] = $row['company'];
            }
             echo json_encode($data);
        }
?>

【问题讨论】：

似乎很难证明如此频繁地访问服务器......你不能一次发送所有可能的值吗？
@MatthewGoulart 你能解释一下吗？
我做了很多假设，但是，与其让您的自动完成框在每次用户向下滚动 x 次时从服务器请求更多值，不如将所有可能的值一次性发送单个请求？这样可以避免无缘无故撞到服务器。 HTTP 请求会产生大量开销，如果可以避免，则应该这样做。
@MatthewGoulart 我试过一次加载所有结果。服务器响应太慢了。所以我决定使用限制及其以最佳响应时间工作。所以我想知道是否可以将分页应用为“加载更多”功能。
我明白了。有没有可能是其他东西减慢了它的速度？需要有 lot（我的意思是 lot）的值来显着减慢响应速度。

标签： javascript php jquery jquery-ui

【解决方案1】：

首先，您的 PHP 需要能够收集一定数量的结果。

这可能看起来像这样：

<?php
$start = isset($_POST['o']) ? int($_POST['o']) : 0;  // Offset
$count = isset($_POST['l']) ? int($_POST['l']) : 100; // Limit
$company = $conn->real_escape_string($_POST['term']); // Search Term, protected from SQL Injection

$get_company = "SELECT DISTINCT companies.company
  FROM companies
  INNER JOIN target_details
  ON companies.company_id = target_details.company_id
  WHERE companies.company LIKE \"%$company%\"
  LIMIT $count OFFSET $start";
if($run_company = $conn->query($get_company)){
    while($row = $run_company->fetch_assoc()){
        $data[] = $row['company'];
    }
    echo json_encode($data);
}
?>

所以现在当我们请求更多数据时，我们可以发送{ o: 10, l: 100, term: "app" } 之类的。从您给出的示例中提取，它可能看起来有点像这样：

_scrollMenu: function(ul, items) {
  var self = this;
  var startShow = 10;
  var maxShow = 100;
  var results = [];
  var pages = Math.ceil(items.length / maxShow);
  $.ajax({
    url: "function/all_company_auto.php",
    type: "POST",
    data: {
      o: startShow,
      l: maxShow,
      term: self.request.term
    },
    dataType: "json",
    sucess: function(data);
    $.each(data, function(k, v) {
      results.push(v);
    });
  });
  //results = items.slice(startShow, maxShow);

  if (pages > 1) {
    $(ul).scroll(function() {
      if (isScrollbarBottom($(ul))) {
        ++window.pageIndex;
        if (window.pageIndex >= pages) return;

        results = items.slice(window.pageIndex * maxShow, window.pageIndex * maxShow + maxShow);

        //append item to ul
        $.each(results, function(index, item) {
          self._renderItem(ul, item);
        });
        //refresh menu
        self.menu.deactivate();
        self.menu.refresh();
        // size and position menu
        ul.show();
        self._resizeMenu();
        ul.position($.extend({
          of: self.element
        }, self.options.position));
        if (self.options.autoFocus) {
          self.menu.next(new $.Event("mouseover"));
        }
      }
    });
  }

  $.each(results, function(index, item) {
    self._renderItem(ul, item);
  });
}

这个例子的问题是项目的数量是已知的。您必须进行初步查询以收集所有可能的结果。所以这将开始分崩离析。这也不是自动完成的最佳用途。

如果你能澄清为什么你想要得到这么多结果而不是限制它，那就更好了。

【讨论】：