我尝试通过使用 jquery ajax 调用更新数据列表本身来通过数据列表更新 html 表单中的输入。在使用 ajax 的情况下,输入不显示选项,但是 当我再次单击输入字段时。没有 ajax 的静态测试版本确实按预期工作,在输入字段中键入时显示选项。
HTML 标记
<form id="formID" class="form-horizontal">
<div class="control-group">
<label class="control-label" for="input">Location</label>
<div class="controls">
<input type="text" list="LIST_CITIES" id="inputCity"
placeholder="Enter your location..">
</div>
</div>
<!-- submit -->
<button type="submit" class="btn">Submit</button>
</form>
<datalist id="LIST_CITIES"></datalist>
没有 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<len; i++) {
var opt = $("<option></option>").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<len; i++) {
var opt = $("<option></option>").attr("value", data.results[i]['city']);
tempObj[data.results[i]['city']] = data.results[i]['id'];
dataList.append(opt);
}
}
}
});
最佳答案
“打字时不起作用” --因为ajax是异步的。因此,当有人在输入框中输入数据时,它正在对您的服务器进行 ajax 调用,并且在响应返回之前无法显示输出。您仍然可以在 ajax 调用中尝试 async:false 。它会锁定浏览器,直到您的响应从服务器返回,但这不是一个好主意。
$.ajax({
type: "GET",
url: GET_cities,
**async:false,**
data: {startswith: val, maxRows: 5},
success:function(data){
if(data.results.length) {
for(var i=0, len=data.results.length; i<len; i++) {
var opt = $("<option></option>").attr("value", data.results[i]['city']);
tempObj[data.results[i]['city']] = data.results[i]['id'];
dataList.append(opt);
}
}
}
});
关于html - 使用数据列表和 ajax 动态自动完成 HTML5 输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15819715/