Javascript 从obj数据在普通JS中自动完成

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

HTML.

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

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

---

您需要匹配

文件.Name

，而不是

文件

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

true/false

值，而不是对象

var json=[{
“名称”：“拉链”，
“类型”：“目录”，
“修改日期”：“2018年6月14日17:22:50”，
“大小”：“5 KB”，
}, {
“名称”：“预设值”，
“类型”：“目录”，
“修改日期”：“2018年11月5日7:32:10”，
“大小”：“2 KB”，
}, {
“名称”：“工作流”，
“类型”：“目录”，
“修改日期”：“2018年6月26日10:29:59”，
“大小”：“6KB”，
}, {
“名称”：“软件”，
“类型”：“目录”，
“修改日期”：“2018年3月16日10:29:59”，
“大小”：“16 KB”，
}, {
“名称”：“mmm_数据”，
“类型”：“目录”，
“修改日期”：“2018年6月27日1:19:29”，
“大小”：“3KB”，
}, {
“名称”：“作业”，
“类型”：“目录”，
“修改日期”：“2018年4月27日11:59:59”，
“大小”：“3KB”，
}, ];
函数匹配（输入）{
var reg=new RegExp（input.split（''）.join（'\\w*'）。replace（/\w/，''），'i'）；
返回json.filter（file=>！！file.Name.match（reg））；
}
函数更改输入（val）{
如果（val.length==0）返回；
var autoCompleteResult=matchIt（val）；
document.getElementById（“结果”）.innerHTML=autoCompleteResult.map（i=>i.Name）.join（“
”）
}

---

您需要匹配

文件.Name

，而不是

文件

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

true/false

值，而不是对象

var json=[{
“名称”：“拉链”，
“类型”：“目录”，
“修改日期”：“2018年6月14日17:22:50”，
“大小”：“5 KB”，
}, {
“名称”：“预设值”，
“类型”：“目录”，
“修改日期”：“2018年11月5日7:32:10”，
“大小”：“2 KB”，
}, {
“名称”：“工作流”，
“类型”：“目录”，
“修改日期”：“2018年6月26日10:29:59”，
“大小”：“6KB”，
}, {
“名称”：“软件”，
“类型”：“目录”，
“修改日期”：“2018年3月16日10:29:59”，
“大小”：“16 KB”，
}, {
“名称”：“mmm_数据”，
“类型”：“目录”，
“修改日期”：“2018年6月27日1:19:29”，
“大小”：“3KB”，
}, {
“名称”：“作业”，
“类型”：“目录”，
“修改日期”：“2018年4月27日11:59:59”，
“大小”：“3KB”，
}, ];
函数匹配（输入）{
var reg=new RegExp（input.split（''）.join（'\\w*'）。replace（/\w/，''），'i'）；
返回json.filter（file=>！！file.Name.match（reg））；
}
函数更改输入（val）{
如果（val.length==0）返回；
var autoCompleteResult=matchIt（val）；
document.getElementById（“结果”）.innerHTML=autoCompleteResult.map（i=>i.Name）.join（“
”）
}

可以让我们看看：有这么多纯JS自动完成库。你为什么要从废纸上写它？或者检查一下好的ol autoComplete:@organism.exe谢谢我读过这篇文章；但它使用的是php数据source@No-Spex如它所述，您可以使用JSON格式的数据源，也许可以让我们看看：有这么多纯JS自动完成库。你为什么要从废纸上写它？或者检查一下好的ol autoComplete:@organism.exe谢谢我读过这篇文章；但它使用的是php数据source@No-Spex声明，您可以使用和JSON格式的数据源

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