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

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

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

Jquery UI自动完成w /无限滚动

1 个答案: