在纯 JS 中从 obj 数据自动完成

Question

我正在尝试用普通的 javascript 创建一个“自动完成”搜索输入字段（没有 jquery 或 jquery-ui）。我希望“自动完成”从我的 javascript 对象数据中提取“建议”。我正在尝试以下内容；没有任何效果（没有错误，只是没有响应输出）。功能应该是“匹配”缩小；即我开始输入“s”，“结果”将首先被推荐，等等

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;
}


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",
}, ];

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

Answer 1

您需要匹配

file.Name

，而不是

file

。然后过滤器回调函数应该返回一个

true/false

值而不是对象

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",
}, ];




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

function changeInput(val) {
  if (val.length == 0) return;
  var autoCompleteResult = matchIt(val);
  document.getElementById("result").innerHTML = autoCompleteResult.map(i => i.Name).join('<br>')
}

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