<Select> 带有无限滚动下拉菜单的小部件答案

【问题标题】：<Select> widget with infinite scroll dropdown<Select> 带有无限滚动下拉菜单的小部件
【发布时间】：2015-10-31 06:43:07
【问题描述】：

在我的页面上，我有大约 20 个常见的 html 选择小部件。例如：

<select>
    <option>1</option>
    ...
    <option>3000</option>
</select>

每个元素包含 3000 个或更多元素。所以我决定将它们转换为 ajax 选择以在滚动时动态加载项目。

我该怎么做？

【问题讨论】：

到目前为止你尝试过什么？例如，您是否能够从 ajax 中检索所有值？选择中的数据来自哪里？这个问题太广泛了，无法得到正确的答案。顺便说一句，即使有赏金......你会发现 SO 上没有人会为你编写代码！
我已经尝试了 jquery 中的所有插件，但它们不支持普通选择的无限滚动（例如 select2 仅在您进行自动完成时支持）。我找到的最佳解决方案是：usamimi.info/~sutara/ajax-combobox 但我无法将分页转换为滚动......
你也可以试试jquery select2插件。 select2.github.io 用户可以在哪里使用ajax搜索数据。

标签： javascript jquery html optimization infinite-scroll

【解决方案1】：

这可以通过简单的 JQuery 来实现。不需要任何其他插件

var selectObj = $("#myselectbox");
var singleoptionheight = selectObj.find("option").height();
var selectboxheight = selectObj.height();
var numOfOptionBeforeToLoadNextSet = 2;
var lastScrollTop = 0;
var currentPageNo = 1;
var isAppending = false;
var currentScroll = 0;

$(document).ready(function() {
  $(selectObj).scroll(function(event) {
    OnSelectScroll(event);
  });
});

function OnSelectScroll(event) {
  var st = $(selectObj).scrollTop();
  var totalheight = selectObj.find("option").length * singleoptionheight;
  if (st > lastScrollTop) {
    // downscroll code
    $("#direction").html("downscroll");
    currentScroll = st + selectboxheight;
    $("#scrollTop").html(currentScroll);
    $("#totalheight").html(totalheight);

    if ((currentScroll + (numOfOptionBeforeToLoadNextSet * singleoptionheight)) >= totalheight) {
      currentPageNo++;
      LoadNextSetOfOptions(currentPageNo);
    }

  } else {
    // upscroll code
    $("#direction").html("upscroll");
  }
  lastScrollTop = st;
}



function LoadNextSetOfOptions(pageNo) {
  //here we can have ajax call to fetch options from server.
  //for demo purpose we will have simple for loop
  //assuming pageNo starts with 1
  var startOption = ((pageNo - 1) * 10) + 1; //for example if pageNo is 2 then startOption = (2-1)*10 + 1 = 11
  var endOption = startOption + 10; //for example if pageNo is 2 then endOption = 11 + 10 = 21

  for (i = startOption; i < endOption; i++) {
    $(selectObj).append("<option>" + i + "</option>");
  }

  $(selectObj).scrollTop(currentScroll - (selectboxheight));

}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>

<body>
  <p>Infinite scroll for select box</p>
  <select id="myselectbox" size="5">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
  </select>

  <p>Direction: <span id="direction"></span>
  </p>

  <p>scrollTop: <span id="scrollTop"></span>
  </p>
  <p>totalheight: <span id="totalheight"></span>
  </p>
</body>

</html>

【讨论】：

【解决方案2】：

我提供了一组使用jQuery UI selectmenu 的组合框工作示例。我已经使用基本的 JSON 源进行 ajax 请求，请自行处理这部分。

$(".ajax-combo").selectmenu({
  "width": "100px",
});
$(".ajax-combo").selectmenu("menuWidget").addClass("make-scrolling");
$(".ajax-combo").selectmenu("menuWidget").scroll(function(e) {
  if (e.currentTarget.scrollHeight - 10 < e.currentTarget.scrollTop + $(e.currentTarget).height()) {
    var curTar = e.currentTarget;
    var lastTop = curTar.scrollTop;
    $.getJSON("http://echo.jsontest.com/10/test/20/rest/30/best/40/vest/50/fest", function(data) {
      $.each(data, function(key, val) {
        $(".ajax-combo").append("<option value='" + key + "'>" + val + "</option>");
      });
      $(".ajax-combo").selectmenu("refresh");
      curTar.scrollTop = lastTop;
    });
  }
});

.make-scrolling {
  overflow-y: scroll;
  height: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<select class="ajax-combo">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

【讨论】：