使用datalist＆ajax动态自动填充HTML5输入

Question

我尝试通过使用jquery ajax调用更新数据列表本身，通过datalist更新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); 
     } 
    } 
    } 
}); 

Answer 1

打字时“不工作“ - 这是因为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); 
      } 
     } 
     } 
    }); 

Answer 2

你需要这样做：

删除

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

并替换：

dataList.append(opt); 

有：

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

并附加：

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

对我来说它的工作原理！

Answer 3

您可能想要尝试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 
}