Автозаполнение в обычном JS из данных obj

Я пытаюсь создать поле ввода поиска «автозаполнение» в ванильном javascript (без jquery или jquery-ui). Я бы хотел, чтобы «автозаполнение» извлекало из моего объекта javascript данные для «предложений». Я пытаюсь сделать следующее: безрезультатно (без ошибок, просто без ответа). Функциональность должна быть суженной «совпадением»; т.е. я начинаю набирать «сначала будут рекомендованы результаты» и т. д.

HTML.

<div class = "row">
    <input type = "text" id = "autoSuggest" placeholder = "Search..." onkeyup = "changeInput(this.value)">
    <div id = "result"></div>
</div>

Попытка JavaScript для этой функции:

function matchIt(input) {
  var reg = new RegExp(input.split('').join('\\w*').replace(/\W/, ""), 'i');
  return json.filter(function(file) {
    if (file.match(reg)) {
      return file;
    }
  });
}

function changeInput(val) {
  var autoCompleteResult = matchIt(val);
  document.getElementById("result").innerHTML = autoCompleteResult;
}

Данные JS obj:

var json =[{
            "Name": "zips",
            "Type": "Directory",
            "DateModified": "6/14/2018 17:22:50",
            "Size": "5 KB",
        }, {
            "Name": "presets",
            "Type": "Directory",
            "DateModified": "5/11/2018 7:32:10",
            "Size": "2 KB",
        }, {
            "Name": "workflow",
            "Type": "Directory",
            "DateModified": "6/26/2018 10:29:59",
            "Size": "6 KB",
        },{
            "Name": "software",
            "Type": "Directory",
            "DateModified": "3/16/2018 10:29:59",
            "Size": "16 KB",
        },{
            "Name": "mmm_data",
            "Type": "Directory",
            "DateModified": "6/27/2018 1:19:29",
            "Size": "3 KB",
        },{
            "Name": "jobs",
            "Type": "Directory",
            "DateModified": "4/27/2018 11:59:59",
            "Size": "3 KB",
        },
];