JSONでオートコンプリート

Question

私はJSONデータを持っていますが、私のJSONは動作していると思いますが、どのように動作するのか分かりませんでしたか？私が都市や国を書いたときに何も起こらなかったのですが、どうすればそれを効かせることができますか？

私は属性を持っていますが、入力したデータリストを自動的に開くと自動的に開きます。しかし、何か書いたら、インラインデータリスト属性はもう使えません。それ ？

私はAwesomplete pluginを使用していますし、あなたが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

に私のプロジェクトを見たい場合は、あなたの入力の属性「データリスト」にアクセスし、あなたのJSONを設定する必要がありますデータソースとして。

これを試してみてください：望ましい結果に

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