使用datalist&；动态自动完成HTML5输入；AJAX

我尝试通过使用jQueryAjax调用更新数据列表本身，通过数据列表更新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'）。在（“输入点击”，“输入城市”，函数（e）{
var val=$（this.val（）；
dataList.empty（）；
如果（val==“”| val.length<3）返回；
if（testObj.results.length）{
对于（var i=0，len=testObj.results.length；i“键入时不起作用”
--这是因为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);
          }
        }
      }
    });

$.ajax({
键入：“获取”，
url:GET_cities，
**async:false**
数据：{startswith:val，maxRows:5}，
成功：功能（数据）{
if（data.results.length）{
对于（var i=0，len=data.results.length；i您需要这样做：

除去

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

与：

对我来说，它很管用！
你可能想试试setInterval和clearInterval

例如：

var wait = false;
$('.controls').on("input click", "#inputCity", function() {
    var val = this.value; // All hail Vanilla JS
    dataList.empty();
    var tempObj = []; // This wasn't in your question, but I had to declare it to get rid of undefined variable errors

    if(val === "" || val.length < 3) return;
    if(wait) window.clearInterval(wait);
    wait = setInterval(function(){
        $.get(GET_cities,{startsWith:val,maxRows: 5},function(result){
            // If what you get is already an array, you can skip this line
            result = JSON.parse(result);
            if(result.results.length){
                for(var city in data.results){
                    if(data.results.hasOwnProperty(city){
                        var opt = $("<option></option>").attr("value",city['city']);
                        tempObj[city['city']] = city['id'];
                        dataList.append(opt);
                    }
                }
            }
        });
    },200); // Change 200 mili-seconds to a delay of your desire
}

var wait=false；
$（'.controls'）。在（“输入单击”，“输入城市”，函数（）上）{
var val=this.value；//所有
dataList.empty（）；
var tempObj=[]；//这不是您的问题，但我必须声明它以消除未定义的变量错误
如果（val==“”| val.length<3）返回；
if（等待）窗口。clearInterval（等待）；
wait=setInterval（函数（）{
$.get（get_cities，{startsWith:val，maxRows:5}，函数（result）{
//如果你得到的已经是一个数组，你可以跳过这一行
result=JSON.parse（result）；
if（result.results.length）{
for（数据中的var城市。结果）{
if（data.results.hasOwnProperty（城市）{
var opt=$（“”）.attr（“值”，city['city']）；
tempObj[city['city']=city['id']；
dataList.append（opt）；
}
}
}
});
}，200）；//将200毫秒更改为您希望的延迟
}
您得到的url是否正确？您的请求是否转到服务器？是的，我得到的数据格式与testobject类似。唯一的区别是第二个（ajax）当我在输入字段中键入内容时，解决方案没有显示选项此处发布了一个变通方法：使用同步AJAX请求是一种非常糟糕的做法，因为它们往往会持续较长的时间，在这段时间内，您将阻塞所有其他内容。此外，它将被弃用，请参阅
var opt = $("<option></option>").attr("value", data.results[i]['city']);

dataList.append(opt);

dataList.append("<option value='" + data.results[i]['city'] + "'>");

$.ajax({
    ...
    async:false,
    ...
});

var wait = false;
$('.controls').on("input click", "#inputCity", function() {
    var val = this.value; // All hail Vanilla JS
    dataList.empty();
    var tempObj = []; // This wasn't in your question, but I had to declare it to get rid of undefined variable errors

    if(val === "" || val.length < 3) return;
    if(wait) window.clearInterval(wait);
    wait = setInterval(function(){
        $.get(GET_cities,{startsWith:val,maxRows: 5},function(result){
            // If what you get is already an array, you can skip this line
            result = JSON.parse(result);
            if(result.results.length){
                for(var city in data.results){
                    if(data.results.hasOwnProperty(city){
                        var opt = $("<option></option>").attr("value",city['city']);
                        tempObj[city['city']] = city['id'];
                        dataList.append(opt);
                    }
                }
            }
        });
    },200); // Change 200 mili-seconds to a delay of your desire
}