用JSON实现自动完成功能

Question

我有JSON数据，我猜我的JSON是有效的，但有些东西我不明白它将如何工作？当我写城市或国家时什么都没有发生，我该如何使其工作？

我有一个data-list属性，当我点击我的输入框时，我的数据列表会自动打开，到目前为止还好。但是如果我写了一些内容，我的内联数据列表属性就不再起作用，只有我的JSON能起作用，我该怎么做？

我正在使用Awesomplete 插件，如果你想在codepen 上查看我的项目，请单击查看 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>

- ani_css

---

请提供更多关于期望结果的解释。 - Lionel B

实际上像http://www.tourradar.com一样，如果你点击输入框，你会看到默认数据，但是当你输入一些内容后，你会看到另外的数据。我想做类似的事情，这就是我需要多个数据列表的原因。 - ani_css

Answer 1

您需要访问输入的"data-list"属性，并将您的JSON设置为数据源。

尝试这样做：

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

- PRogalla

---

是的，但是我的属性 data-list 现在无法工作。http://codepen.io/cowardguy/pen/zZWMzp - ani_css

请问您能否检查一下您的CodePen？看起来是旧版本，我没有看到任何更新。 - PRogalla

好的，我又分支了，这是链接：http://codepen.io/cowardguy/pen/zZWMzp - ani_css

或者有可能这样做...当我聚焦输入时，我的国家列表必须打开，但如果我按键，则我的城市必须打开。 - ani_css