How to populate a large datalist (~ 2000 items) from a dictionary

Question

Right now I am using the following code, but it takes ~ 10 seconds in Chrome and ~ 2 minutes on IE11, in which it will mainly be used.

for (var key in dict) {
    if (dict.hasOwnProperty(key)) {
        combo.innerHTML += "<option value=\"" + dict[key] + "\">" + key + "</option>";
    }
}

I read this tutorial: http://blog.teamtreehouse.com/creating-autocomplete-dropdowns-datalist-element , which suggested using ajax, for example, when dealing with large quantities, although I'm not sure if large refers to 100 items or 100,000 items.

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

I am trying to get this to work for a dictionary by replacing request.responseTextwith JSON.parse(JSON.stringify(dict));, but I am having trouble getting it to start a query because it is not in the file.

How should I do it? And if I should not use a DataList for this, what alternative do you recommend?

.

Answer 1

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

Answer 2

- HTML, innerHTML.

var htmlStr = '';
for (var key in dict) {
    if (dict.hasOwnProperty(key)) {
        htmlStr += "<option value=\"" + dict[key] + "\">" + key + "</option>";
    }
}
combo.innerHTML = htmlStr;

: http://jsperf.com/string-append-vs-dom

Answer 3

DOM is known to be slow. You can try to filter manually and show only the first elements of X. As znap026 noted, using document fragments will also help speed up the process.

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

<input id="input" list="datalist" placeholder="document properties"/>
<datalist id="datalist"></datalist>

Run codeHide result