如何快速填充rails中的*数据相互依赖* <select>下拉列表？
用户需要选择一辆车。
在选择汽车时，我们有几个下拉列表，以便选择年份、制造商、型号和子型号。最初，我们不知道make/model/submodel的选择选项使用什么，因为它们是相互依赖的。
一旦我们选择了year，我们就使用ajax发出请求，查询ActiveRecord来填充make下拉列表。
然后，当我们选择make时，我们使用ajax来查询和填充模型下拉列表。然后，当我们选择model时，我们使用ajax来查询和填充子模型下拉列表。
问题是，这是许多独立的网络请求，在低带宽、网络问题等实际条件下，经常会出现暂停，严重影响用户体验，偶尔会导致失败。
哪些方法可以帮助避免所有这些网络请求。在那里，有一种方法可以在客户端浏览器上存储数千种型号组合？
目前，数据存储在Rails框架中通过ActiveRecord访问的sql数据库中。每个下拉选择都会导致另一个查询，因为您只有在知道年份之后才能显示populate和show，并且只有在知道make之后才能填充和显示模型。submodel也是如此(不过为了简单起见，我在本文的其余部分省略了submodel！)。
可以对10,000种组合的JSON数据进行会话(http://simonsmith.io/speeding-things-up-with-sessionstorage/)存储吗？我看到sessionStorage通常至少有5MB(5,200,000字节)，所以每条记录有5200000/10000= 520字节。可能够了吧？如果这种情况在会话和跨页面中持续存在，那么在许多情况下，我们实际上可以在上一页开始，如果有时间完成，我们就不需要在相关的(下一页)上进行外部调用了。我们需要偶尔或按需刷新这些数据，因为新的year-make-models会定期添加(一年几次)。
最终，我认为这里的解决方案可能对大量应用程序和公司非常有用。这里的例子是选择一辆汽车本身，它被几十个主要的汽车保险网站使用(他们现在都在做多个呼叫)。为依赖关系的sdropdown存储客户端数据的通用应用程序也可以应用于许多其他情况，例如在线购物品牌年模型。填充sessionStorage的后端框架也可以通过不同的后端框架来完成。
另一种选择可能是在https://www.youtube.com/watch?v=S1AUIq8GA1k上尝试谷歌的Lovefield - https://github.com/google/lovefield More，它是开源的，可以在ff，chrome，IE，Safari等平台上运行。
似乎sessionStorage对我们(相当大的)业务来说可能比基于谷歌100天开发的东西更好-尽管它是开源的。
回答 2
Stack Overflow用户
发布于 2015-10-08 21:08:47
您好，您可以为所有细节创建JSON对象，并且可以根据选择的值循环数组并填充该值。让我
var cardetail = [{
"name": "MARUTI",
"model": [{
"name": "SWIFT",
"year": ["2005", "2006", "2008"]
}, {
"name": "ALTO",
"year": ["2009", "2010", "2011"]
}]
}, {
"name": "Hundai",
"model": [{
"name": "I20",
"year": ["2011", "2012", "2013"]
}, {
"name": "I20",
"year": ["2013", "2014", "2015"]
}]
}];
var currentCumpany = null;
var currentModel = null;
$(document).ready(function() {
$("#company").append("<option value=''>Select Company</option>");
for (i = 0; i < cardetail.length; i++) {
$("#company").append("<option value='" + cardetail[i].name + "'>" + cardetail[i].name + "</option>");
};
$("#company").change(function() {
for (i = 0; i < cardetail.length; i++) {
if (cardetail[i].name == $("#company").val()) {
currentCumpany = cardetail[i];
}
};
$("#model").html("");
for (i = 0; i < currentCumpany.model.length; i++) {
$("#model").append("<option value='" + currentCumpany.model[i].name + "'>" + currentCumpany.model[i].name + "</option>");
};
});
$("#company").change(function() {
for (i = 0; i < cardetail.length; i++) {
if (cardetail[i].name == $("#company").val()) {
currentCumpany = cardetail[i];
}
};
$("#model").html("");
for (i = 0; i < currentCumpany.model.length; i++) {
$("#model").append("<option value='" + currentCumpany.model[i].name + "'>" + currentCumpany.model[i].name + "</option>");
};
});
$("#model").change(function() {
for (i = 0; i < currentCumpany.model.length; i++) {
if (currentCumpany.model[i].name == $("#model").val()) {
currentModel = currentCumpany.model[i];
}
};
$("#year").html("");
for (i = 0; i < currentModel.year.length; i++) {
$("#year").append("<option value='" + currentModel.year[i] + "'>" + currentModel.year[i] + "</option>");
};
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="company"></select>
<select id="model"></select>
<select id="year"></select>
Stack Overflow用户
发布于 2015-10-08 21:33:36
首先，除非所需的带宽太贵，否则您可以检查缓存，然后在用户选择一年后(甚至在此之前)开始请求流行的品牌/型号/子型号，并对其进行缓存。现在甚至有一个基于indexDB的完整的浏览器RDBMS (完全公开:它是新的，我还没怎么用过它)。
至于选择哪些要预加载，你可以根据生产的单位，售出的单位，汽车和司机杂志排名，数据挖掘你的实际用户的请求，无论什么。
我的观点是，从用户体验的角度来看，你至少应该缓存用户实际发出的请求，并在加载时提供一个选项，让用户直接跳回到他们搜索的上一年/make/model，而不是让他们每次访问都重新输入。让流行的车辆预加载只会让事情变得更容易。通过对给定用户可能搜索的内容进行预测分析，您希望在多大程度上突破极限，取决于您的团队技能/预算/时间限制。
我意识到这本身并不是一个完整的答案，我不确定这个问题有没有答案(例如，“使用这个策略/框架/库，你的所有问题都会神奇地消失！它甚至可以做出朱利安薯条！”)。但如果遇到这种问题，我的第一个想法是如何更快地将更多(希望是相关的)数据提供给客户端，这有望转化为更快(在UX意义上的快速)。
我还建议您在json文件中请求流行数据，而不是每次都访问Rails/ActiveRecord/Database服务器。仅此一项就可以将响应时间减少几毫秒(更不用说这些机器上的使用负载了)。
这并不是说数据真的改变了，一辆2009年的丰田Rav4的规格和2009年的一样。
https://stackoverflow.com/questions/32856869
复制相似问题
腾讯云开发者
