Autocomplete with JSON

Question

I have JSON data and I guess my JSON is works but there is something that I didn't understand how it's going to work ? when I wrote cities or countries nothing happend how will I make it work ?

I havedata-list attribute and when I clicked my input my data-list opening automatically it's ok so far.but if I wrote something my inline data-list attribute musn't work anymore only my Json must work how can I do that ?

I'm using Awesomplete plugin and if you want to see my project on codepen please click to see on codepen

var myJSON = '{ "cities":[ "copenhagen", "london", "hamburg" ], "countries":[ "denmark", "norway", "sweden" ] }';

var myObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = "Cities : " + myObj.cities;
document.getElementById("demo1").innerHTML = "countries : " + myObj.countries;

function showlist() {

}


var comboplete = new Awesomplete('input.dropdown-input', {
  minChars: 0,
});
Awesomplete.$('#test').addEventListener("click", function() {
  if (comboplete.ul.childNodes.length === 0) {
    comboplete.minChars = 0;
    comboplete.evaluate();
  } else if (comboplete.ul.hasAttribute('hidden')) {
    comboplete.open();
  } else {
    comboplete.close();
  }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.1/awesomplete.min.css" rel="stylesheet" />

<div id="demo"></div>
<div id="demo1"></div>



<!--<input type="text" class="awesomplete" data-list="PHP,ASP,ASP.NET,Python,CSS,HTML,C#,C++,Delphi,Visual Basic" onclick="showlist()">-->

<br><br> with auto list

<input id="test" data-list="CSS, JavaScript, HTML, SVG, ARIA, MathML" class="dropdown-input" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.1/awesomplete.min.js"></script>

Answer 1

You have to access the attribute "data-list" of your input and set your json as data source.

Try this:

    var testInput = document.getElementById("test");
    testInput.setAttribute("data-list", myObj.countries)