I need to create an autocomplete feature which uses data from an external JSON I have. Here is my HTML
<div>
<input id="autoComplete">
</div>
Here is my data.json which will be stored in the root folder.
[
{
"en": "vague",
"ml": "avyakta"
},
{
"en": "plethora",
"ml": "atika"
},
{
"en": "army",
"ml": "pada"
},
{
"en": "alter",
"ml": "maru"
},
{
"en": "totality",
"ml": "motta"
}
]
My target is to trigger an autocomplete feature when the input length is greater than 1.
You can use jQuery UI for this. Add jQuery UI & then use that code:
$(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
});
});