Using the Autocomplete widgets in the right and optimized way

Using the Autocomplete widgets in the right and optimized way

Hi,

I have read some books and tutorials about using jQuery UI, including Autocomplete widgets... So , I decided to make some simple application where I have JSON file named auto.json in which is data for the Autocomplete widget.

This is my code:

  1. var arr = [];
    $("#automobil").focus(function() {
        $.getJSON("auto.json", function(data) {
            $.each(data, function(key, value) {
                if ($.inArray(value.name, arr) === -1) {
                    arr.push(value.name)
                }
            })
        });
    }).autocomplete({
        source: arr
    }).focusout(function() {
        arr = [];
    });     

On StackExchange I asked is it good to empty an array on focusout because my thoughts were that in "real world examples", there can be large amounts of data, so the array needs to be empty on focusout (after the job is done), because of resources...


This is the response that I received:

http://codereview.stackexchange.com/questions/85159/empty-an-array-on-focusout-jquery-ui-autocomplete/85230?iemail=1&noredirect=1#85230



I believe this is a case of being too paranoid in optimization. Here's some problems:

  • Your arr is global. You should probably place this somewhere only the widget knows about.

  • You're clearning the array... by creating another array. You're spawning more objects (in this case, an array) instead of cleaning up. The proper way to clear an array is to set length to 0. If nothing references the items in the array, they'll get GC'ed eventually.

  • autocomplete, focus, and focusout can go out of sync. When you focus on the input, you do getJSON. However, your autocomplete will run regardless if the request has returned. So that means the array might be empty when autocomplete runs. When you focus out, you cleared your array, so if you focus in again, this happens.

  • You're making unnecessary AJAX calls. On focus, you're calling AJAX. In the real world, waiting for AJAX is a more painful experience than memory consumption. With proper practice, the GC can and will reclaim memory but you can't reclaim the time you waited for AJAX.

I suggest you do the following instead:

  • You can limit the returned results to a reasonable length. That way, even if you hit the server with AJAX for each keypress, the return won't take that long.

  • Cache your results. Have some internal logic which caches returned data into an array (add when non-existent, update if existing). The problem here isn't the size of your cached data. It's the way you're discarding data and retrieving them back again.

I understand the essence of this response , but there are some details that are not clear to me , and I want to ask about that here:


Your arr is global. You should probably place this somewhere only the widget knows about.
1. In the case of my example that I posted above , can you tell me where, how to do it so my arr will not be global?


 You're making unnecessary AJAX calls & autocomplete, focus, and focusout can go out of sync.
2. I really don't know how to do without AJAX calls. In the case of my example that I posted above , is it even possible to get data (that will be used by Autocomplete) without AJAX calls (and focus)?


Cache your results.

3. I know nothing about how to Cache results, maybe it has something to do with server-side (for example PHP)?


Thank you in advance!