Jquery UI自動完成w /無限滾動

Question

我正在嘗試在自動填充文本框中加載更多滾動數據當用戶向下滾動時，它將像分頁一樣運行，根據需要加載更多結果。

像這樣的東西。

我一直在尋找相當長的一段時間，我遇到了像我一樣的問題。

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

這個例子的問題是物品的數量是已知的。 您必須進行初步查詢以收集可能的總結果。 所以這將開始分崩離析。 這也不是自動完成的最佳用途。

如果您可以澄清為什么要獲得如此多的結果而不是限制它，那就更好了。