La saisie semi-automatique d'entrée HTML5 dynamiquement à l'aide de datalist & ajax

J'essaie de mettre à jour une entrée dans un formulaire html via datalist par la mise à jour de la datalist lui-même en utilisant jquery, les appels ajax. dans le cas de l'utilisation d'ajax, l'entrée n'affiche pas les options, mais quand je clique dans le champ de saisie de nouveau. l'essai statique de la version sans ajax ne fonctionne pas comme prévu, montrant les options tout en tapant dans le champ de saisie.

Balisage 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>

sans ajax (fonctionne):

$('.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);
  }
}

  });

avec ajax (ne fonctionne pas lors de la saisie):

$('.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);
      }
    }
  }
});

Vous GET_cities url c'est correct? Votre demande d'aller sur le serveur?
Oui, je reçois les données de formaté similaire à la testobject. La seule différence ist que le deuxième (ajax) solution ne permet pas de montrer les options alors que je suis en tapant dans le champ de saisie
Une solution de contournement a été posté ici : stackoverflow.com/questions/26610752/...

OriginalL'auteur Dominik H | 2013-04-04

"ne fonctionne pas lors de la frappe"
--C'est parce que l'ajax est asynchrone. Donc quand quelqu'un est en train de taper des données dans la zone de saisie, il fait un appel ajax à votre serveur et il ne sera pas en mesure de montrer de sortie jusqu'à ce que la réponse revint. Vous pouvez toujours essayer async:false dans votre appel ajax. Il permet de verrouiller le navigateur jusqu'à ce que votre réponse est venue de retour du serveur, mais il n'est pas une bonne idée.

$.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);
          }
        }
      }
    });

OriginalL'auteur Saurav Pandit

0

Vous avez besoin de le faire:

Supprimer
```
var opt = $("<option></option>").attr("value", data.results[i]['city']);
```
et remplacer:
```
dataList.append(opt);
```
avec:
```
dataList.append("<option value='" + data.results[i]['city'] + "'>");
```
et d'ajouter:
```
$.ajax({
    ...
    async:false,
    ...
});
```
pour moi ça fonctionne!

C'est une très mauvaise pratique à utiliser synchrone des requêtes AJAX, car ils ont tendance à durer un temps relativement long et vous serez en bloquant toute autre chose pendant ce temps. De Plus, il est sur le point d'être obsolète, voir xhr.spec.whatwg.org/#sync-warning

OriginalL'auteur Bogdan Lewis

Vous pouvez essayer des setInterval et clearInterval.

Par exemple:

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
}

OriginalL'auteur Steel Brain

Vous devez vous connecter pour publier un commentaire.