Autocomplete HTML5 input dynamically using datalist & ajax

Question

I try to update a input in a html form via datalist by updating the datalist itself using jquery ajax calls. in case of using ajax the input does not show the options, but when i click into the input field again. the static test version without ajax does work as expected, showing options while typing into the input field.

HTML markup

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

without ajax (does work):

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

  });

with ajax (does not work while typing):

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

Solution

"does not work while typing" --It is because ajax is asynchronous. So when somebody is typing data in input box it is making an ajax call to your server and it will not be able to show output until the response came back. Still you can try async:false in your ajax call. It will lock the browser until your response came back from server but it is not a good idea.

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