html5动态输入效果,使用datalist＆amp; amp;动态自动完成HTML5输入阿贾克斯

我尝试通过使用jquery ajax调用更新datalist本身来通过datalist更新html表单中的输入。如果使用ajax，当我再次单击输入字段时，输入不显示选项但。没有ajax的静态测试版本可以按预期工作，在输入字段中输入时显示选项。

HTML标记

Location

placeholder="Enter your location..">

Submit

没有ajax(确实有效)：

$('.controls').on("input click", "#inputCity", function(e) {

var val = $(this).val();

dataList.empty();

if(val === "" || val.length < 3) return;

if(testObj.results.length) {

for(var i=0, len=testObj.results.length; i

var opt = $("").attr("value", testObj.results[i]['city']);

tempObj[testObj.results[i]['city']] = testObj.results[i]['id'];

dataList.append(opt);

}

}

});

使用ajax(在键入时不起作用)：

$('.controls').on("input click", "#inputCity", function(e) {

var val = $(this).val();

dataList.empty();

if(val === "" || val.length < 3) return;

$.ajax({

type: "GET",

url: GET_cities,

data: {startswith: val, maxRows: 5},

success:function(data){

if(data.results.length) {

for(var i=0, len=data.results.length; i

var opt = $("").attr("value", data.results[i]['city']);

tempObj[data.results[i]['city']] = data.results[i]['id'];

dataList.append(opt);

}

}

}

});