Tengo datos JSON y supongo que mi JSON funciona, pero hay algo que no entendí ¿cómo va a funcionar? cuando escribí ciudades o países, no pasó nada, ¿cómo lo haré funcionar?
Tengo un atributo data-list y cuando hice clic en mi entrada, mi lista de datos se abrió automáticamente, está bien hasta ahora. Pero si escribí algo, mi atributo de lista de datos en línea ya no debe funcionar, solo mi Json debe funcionar. ¿Cómo puedo hacer eso?
Estoy usando el complemento Awesomplete y si desea ver mi proyecto en codepen, haga clic para ver en 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>Debe acceder al atributo "lista de datos" de su entrada y configurar su json como fuente de datos.
Prueba esto:
var testInput = document.getElementById("test"); testInput.setAttribute("data-list", myObj.countries)