如何使用外部JSON在Javascript中实现自动完成功能？

Question

我需要创建一个自动完成特性，它使用来自我拥有的外部JSON的数据。这是我的HTML

<div>
 <input id="autoComplete">
</div>

这是我的data.json，它将存储在根文件夹中。

[
 {
   "en": "vague",
   "ml": "avyakta"
 },
 {
   "en": "plethora",
   "ml": "atika"
 },
 {
   "en": "army",
   "ml": "pada"
 },
 {
   "en": "alter",
   "ml": "maru"
 },
 {
   "en": "totality",
   "ml": "motta"
 }
]

我的目标是在输入长度大于1时触发一个自动完成功能。

Answer 1

为此，您可以使用jQuery UI。添加jQuery UI &然后使用该代码：

$(function() {
    $('#autoComplete').autocomplete({
        source: function(request, response) {
            $.ajax({
                url: "list.json",
                dataType: 'json',
                data: request,
                success: function(data) {
                    response($.map(data, function(item) {
                        return (`${item.en} : ${item.ml}`)
                    }));
                }
            });
        },
        minLength: 1
    });
});