Html 数据列表行为怪异

我正在使用数据列表填充一个实时搜索框。该框从数据库中搜索城市，数据列表中最多应填充10条建议，这些建议在用户键入时会更改

然而，显示的建议并不完全符合数据列表中的选项项，我只能看到其中的一些。例如，假设我要搜索纽约市。第一个建议是在我输入完“New”之后才出现的，我看到的城市是“New Glasgow”和“New Westminster”，当查看源代码时，我可以看到数据列表中确实有10个以“New”开头的城市

“New Y”给了我“New Yekepa”，而数据列表中填充了“New Yekepa”、“West New York”、“East New York”和“New York City”。“newyo”一路到“newyork”只给了我“newyorkcity”，当然，东西方的代码仍然存在

---

这是镀铬的。当我在Firefox中试用时，效果稍好一些，显示出更多的结果——有时全部10个，但更多的时候，我只能看到数据列表中出现的10个中的7-8个。

适用于我的FF18和Chrome23！，你试过吗？也许页面中的其他代码把它搞乱了。我认为问题在于我一直在用Ajax更新数据列表的内容。我发现这个教程似乎达到了我想要的效果，我一回到家就会尝试。

<input type="text" list="searchResults">
<datalist id="searchResults">
  <option value="New Glasgow"></option>
  <option value="New Westminster"></option>
  <option value="New Milton"></option>
  <option value="New Malden"></option>
  <option value="New Amsterdam"></option>
  <option value="New Delhi"></option>
  <option value="New Kingston"></option>
  <option value="New Yekepa"></option>
  <option value="New Plymouth"></option>
  <option value="New Corella"></option>
</datalist>