Any way to make ajax dynamic ?

Hi, I managed to get youtube results autocomplete using JSONP like that:

function jsonp(url, callback) {
var callbackName = 'jsonp_callback_' + Math.round(100000 * Math.random());
window[callbackName] = function(data) {
    delete window[callbackName];
    document.body.removeChild(script);
    callback(data);
};

var script = document.createElement('script');
script.src = url + (url.indexOf('?') >= 0 ? '&' : '?') + 'callback=' + callbackName;
document.body.appendChild(script);
}

jsonp('http://suggestqueries.google.com/complete/search?hl=en&q=MYQUERY&client=youtube', function(data) {
    var list = [];
    for (var i = 0; i < data[1].length; i++) {
        list.push(data[1][i][0]);
    }
    console.log(list);
    new Awesomplete(document.querySelector("#search"),{list:list});
});

But there’s a little problem, I want MYQUERY to change on keypress and this way, reload the list content with new data. Is this possible ? Thanks.

[mercmobily]

Isn’t this a perfect solution?

https://github.com/LeaVerou/awesomplete/issues/16892#issuecomment-223066074

var a = new Awesomplete(myInput, myOptions);
myInput.addEventListener('input', function() {
    var list = getNewListWithAjax();
    a.list = list;
    a.evaluate();
});

[chhuang]

@ralienpp I think that’s because you are creating a new instance of Awesomplete everytime you hit a key. Try setting up Awesomplete before your ajax call and outside your keyup event, and then just update list inside the the ajax call.

  var awesomeStuff = new Awesomplete(document.querySelector("#ajax-example input"));

  function run_elasticSearch (value){
    ...
    ajax.onload = function() {
      values =  JSON.parse(ajax.responseText);
      list = values.hits.hits;
      list_name = list.map(function(i) { 
      return i._source.name; });
      console.log(list_name);

      awesomeStuff.list = list_name;
    };
    ...
  }