数据列表选项和输入自动完成行为

Question

我后面有一个文本输入和一个空的html数据列表元素，以及看起来像这样的JavaScript代码：

  $("#city_input").on("input", function(e) {
    var term = e.target.value;

    if (term.length > 2) {
      $.ajax({
        url: "cities",
        type: "get",
        data: {
          term: term
        }
      })
      .success(function(data) {
        fillCityOptions(data);
      })
      .fail(function(jqXHR, textStatus, errorThrown){
        console.log(errorThrown)
      });
    }
  })

函数fillCityOptions()使用AJAX调用返回的json（它是城市值的数组），并为数据列表创建并附加选项。

现在，所有这些从一开始就可以在Chrome中运行。但是，在Firefox和Safari中，即使正确创建了选项，除非我在输入中按退格键，否则它们不会显示在页面上。

我在How do you refresh an HTML5 datalist using JavaScript?偶然发现了对第一个答案的第二条评论，其中提到将autocomplete="off"添加到输入元素。事实证明，这可以解决我的问题，但是我仍然不确定为什么。

这就是为什么我想问-数据列表选项和输入的自动完成之间的联系是什么，为什么这可以解决我的问题？