Autocomplete HTML5-Eingabe dynamisch mit datalist & ajax。「Autocomplete HTML5-Eingabe dynamisch mit datalist & ajax」

Question

Ich versuche, ein Eingabefeld in einem HTML-Formular über eine Datalist zu aktualisieren, indem ich die Datalist selbst mit Hilfe von jQuery-Ajax-Aufrufen aktualisiere. Im Falle der Verwendung von Ajax werden die Optionen nicht im Eingabefeld angezeigt, aber wenn ich erneut in das Eingabefeld klicke. Die statische Testversion ohne Ajax funktioniert wie erwartet und zeigt Optionen an, während man in das Eingabefeld tippt.

HTML-Markup

    Standort

  Absenden

ohne Ajax (funktioniert):

$('.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").attr("value", testObj.results[i]['city']);
    tempObj[testObj.results[i]['city']] = testObj.results[i]['id'];

    dataList.append(opt);
  }
}

  });

mit Ajax (funktioniert nicht beim Tippen):

$('.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").attr("value", data.results[i]['city']);
        tempObj[data.results[i]['city']] = data.results[i]['id'];

        dataList.append(opt);
      }
    }
  }
});

Answer 1

"Funktioniert nicht während des Tippens" -- Das liegt daran, dass ajax asynchron ist. Wenn jemand Daten in das Eingabefeld eingibt, wird ein Ajax-Aufruf an Ihren Server ausgeführt und die Ausgabe kann erst angezeigt werden, wenn die Antwort zurückgekommen ist. Dennoch können Sie versuchen, async:false in Ihrem Ajax-Aufruf zu verwenden. Es sperrt den Browser, bis die Antwort vom Server zurückkommt, aber das ist keine gute Idee.

$.ajax({
      type: "GET",
      url: GET_städte,
      **async:false,**
      data: {startswith: val, maxRows: 5},
      success:function(data){
        if(data.results.length) {
          for(var i=0, len=data.results.length; i").attr("value", data.results[i]['city']);
            tempObj[data.results[i]['city']] = data.results[i]['id'];

            dataList.append(opt);
          }
        }
      }
    });

Answer 2

Du musst Folgendes tun:

Entfernen

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

und ersetzen:

dataList.append(opt);

durch:

dataList.append("");

und hinzufügen:

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

für mich funktioniert es!

Answer 3

Sie könnten versuchen, setInterval und clearInterval auszuprobieren.

Zum Beispiel:

var wait = false;
$('.controls').on("input click", "#inputCity", function() {
    var val = this.value; // Alle lieben Vanilla JS
    dataList.empty();
    var tempObj = []; // Das war nicht in Ihrer Frage, aber ich musste es deklarieren, um undefinierte Variablenfehler loszuwerden

    if(val === "" || val.length < 3) return;
    if(wait) window.clearInterval(wait);
    wait = setInterval(function(){
        $.get(GET_cities,{startsWith:val,maxRows: 5},function(result){
            // Wenn das, was Sie erhalten, bereits ein Array ist, können Sie diese Zeile überspringen
            result = JSON.parse(result);
            if(result.results.length){
                for(var city in data.results){
                    if(data.results.hasOwnProperty(city){
                        var opt = $("").attr("value",city['city']);
                        tempObj[city['city']] = city['id'];
                        dataList.append(opt);
                    }
                }
            }
        });
    },200); // Ändern Sie 200 Millisekunden in eine Verzögerung Ihrer Wahl
}