使用 datalist 和 ajax 动态自动完成 HTML5 输入答案

【问题标题】：Autocomplete HTML5 input dynamically using datalist & ajax使用 datalist 和 ajax 动态自动完成 HTML5 输入
【发布时间】：2023-04-01 07:42:01
【问题描述】：

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

【问题讨论】：

你 GET_cities url 正确吗？您的请求会发送到服务器吗？
是的，我得到的数据格式类似于测试对象。唯一的区别是第二个（ajax）解决方案在我输入输入字段时不显示选项
这里发布了一个解决方法：stackoverflow.com/questions/26610752/…

标签： html rest jquery

【解决方案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);
          }
        }
      }
    });

【讨论】：

【解决方案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,
    ...
});

对我来说它有效！

【讨论】：

使用同步 AJAX 请求是一种非常糟糕的做法，因为它们往往会持续相对较长的时间，并且在此期间您将阻塞其他所有内容。另外，它即将被弃用，请参阅xhr.spec.whatwg.org/#sync-warning

【解决方案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
}

【讨论】：