Question

I am using the following code for making a simple text box an autocomplete box,

var sourceURLRide = "index.php?page=getRideAndParksJson&type=rides&keyword=";
$("#fav_rides_select").autocomplete({
            source: sourceURLRide,
            minLength: 1,
            delay: 0
});

But I need that source to be changed on every key up event fired on fav_rides_select i.e. the source url is changed then the results must be fetched from url. But that’snot working. I am using following code for synchronizing the source with keyup event:

$("#fav_rides_select").keyup(function(){
            $("#fav_rides_select").autocomplete("option","source",sourceURLRide + encodeURIComponent($("#fav_rides_select").attr("value")) );
});

Note: I am using keyup event for passing keyword to php script, so that only relavant results comes up.

Answer 1

You should load your entire JSON if it’s not to small right after document is ready or you can load a subset of your JSON but only if it’s really big data.

Here is a good Article on how to do it for big data remembering the state of your current query.

If you’re not Google, you could use the following code:

$(document).ready(function(){
  var data = $.getJSON('index.php?page=getRideAndParksJson&type=rides',function(data){
    $('#fav_rides_select').autocomplete(
      source: data,
      minLength: 1,
      delay: 0);
  });
});