javascript - 带无限滚动的 Jquery UI 自动完成

Question

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

类似于 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);
        }
?>

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

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

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