现在我正在使用以下代码,但在Chrome浏览器上需要大约10秒钟,在IE11上大约需要2分钟,这也是它最终会被使用的地方。
for (var key in dict) {
if (dict.hasOwnProperty(key)) {
combo.innerHTML += "<option value=\"" + dict[key] + "\">" + key + "</option>";
}
}
我正在阅读本教程:http://blog.teamtreehouse.com/creating-autocomplete-dropdowns-datalist-element建议在处理较大数量时使用ajax,但我不确定大号是指100项还是100,000项。
var request = new XMLHttpRequest();
request.onreadystatechange = function(response) {
if (request.readyState === 4) {
if (request.status === 200) {
var jsonOptions = JSON.parse(request.responseText);
jsonOptions.forEach(function(item) {
var option = document.createElement('option');
option.value = item;
dataList.appendChild(option);
});
} else {
console.log("Failed to load datalist options");
}
}
};
request.open('GET', 'html-elements.json', true);
request.send();
我一直试图通过将request.responseText
替换为JSON.parse(JSON.stringify(dict));
来使字典用于字典,但我遇到了问题,因为它不在文件。
我该怎么做?如果我不应该使用DataList,你会推荐什么选择?
提前致谢。
答案 0 :(得分:4)
在一个可以提高性能的领域是使用文档片段,因为写入DOM的速度很慢。
var frag = document.createDocumentFragment();
for (var key in dict) {
if (dict.hasOwnProperty(key)) {
var option = document.createElement("OPTION");
option.textContent = key;
option.value = dict[key];
frag.appendChild(option);
}
}
combo.appendChild(frag);
答案 1 :(得分:2)
立即获得更好性能的方法是首先构建HTML字符串,然后将其分配给innerHTML。
var htmlStr = '';
for (var key in dict) {
if (dict.hasOwnProperty(key)) {
htmlStr += "<option value=\"" + dict[key] + "\">" + key + "</option>";
}
}
combo.innerHTML = htmlStr;
答案 2 :(得分:1)
DOM非常慢。您可以尝试手动过滤并仅显示前X个元素。正如znap026指出的那样,使用文档片段也有助于加快速度。
validates_presence_of :project
validates_presence_of :tag
validates_uniqueness_of :project, :scope => [:tag]
"use strict";
var data = Object.keys(document).sort(),
datalist = document.getElementById("datalist"),
input = document.getElementById("input");
function search() {
var term = input.value.toLowerCase();
var found = 0;
var frag = document.createDocumentFragment();
for (var child of [].slice.apply(datalist.childNodes)) {
datalist.removeChild(child);
}
for (var item of data) {
if (item.toLowerCase().indexOf(term) === 0) {
let option = document.createElement("option");
option.value = item
frag.appendChild(option);
if (++found > 10) break;
}
}
datalist.appendChild(frag);
}
search();
input.addEventListener("input", search);