<Select> 带有无限滚动下拉菜单的小部件
Posted
技术标签:
【中文标题】<Select> 带有无限滚动下拉菜单的小部件【英文标题】：<Select> widget with infinite scroll dropdown 【发布时间】：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搜索数据。 【参考方案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>【讨论】：
以上是关于<Select> 带有无限滚动下拉菜单的小部件的主要内容，如果未能解决你的问题，请参考以下文章