JQuery autocomplete with ranged fields

Few weeks ago I was looking for a way to get a form field autocomplete from a remote JSON file with a single HTTP request. The solution is here.

Now I want to do the same but using ranged fields (i.e., sort of an array where commas separate items and hyphen define ranges). A valid field would be: 1-8,10,13,15-20.

Here the javascript / JQuery code:

    /* Function to populate the autocomplete from a remote json.
      For ranged fields, .e.g,: 4588-4590,465-658 */
    function split(val) {
        return val.split(/[,-]\s*/);
    }

    function extractLast(term) {
        return split(term).pop();
    }

    function set_autocomplete_ranged(selector, jsonurl) {
        $.ajax({
            url: jsonurl,
            type: 'get',
            dataType: 'json',
            async: true,
            success: function (data) {                
                $(selector).autocomplete({
                    minLength: 0,
                    source: function (request, response) {
                        response($.ui.autocomplete.filter(
                        data, extractLast(request.term) ));
                    },
                    focus: function () {
                        return false;
                    },
                    select: function (event, ui) {
                        var this_value = ui.item.value
                        var all_values = this.value
                        this.value = all_values + this_value
                        return false;
                    }
                }).bind('focus', function () {
                    if (!$(this).val().trim()) $(this).keydown();
                });
            }
        });
    }

An then just add the URL for the JSON and the id for the field you want to use the ranged autocomplete:

    /*
    Function called only once! It populates the autocomplete from a remote json.
    The filtering is made locally as the source is a local variable :)
    */
    $(function() {
        var jsonurl = "http://mysite.com/myjson.json";
        var selector = '#id_ranged_field';
        if  ($(selector).is('*')) {
            set_autocomplete_ranged(selector,jsonurl);
        }
    });

JQuery Autocomplete with an AJAX call to a remote JSON

I'm posting this because it took me ages to figure it out...

I wanted an input field with autcomplete values provided by a remote JSON. My requisites were the following:

• No dynamic JSON request:
• Every time the user types a letter no JSON remote call!
• autocomplete accepts a source : data field, where data can be an URL to a remote location. The problem is that when the user is typing it keeps sending requests to the URL appending ?term=. The idea is that the filtering is done on the server side.... Not what I want... I want the filter to be done on the client side as in case when data is a local variable.
• Also, because every JSON generation takes more than 1 second, I wanted just one, and a single one request, to the remote location.

So here the code that sorted it out:

/* Function to populate the autocomplete from a remote json. 
   Note the Ajax call which success populates the autocomplete selector
*/
function set_autocomplete(selector, jsonurl) {
    $.ajax({
        url: jsonurl,
        type: 'get',
        dataType: 'json',
        async: true,
        success: function(data) {
            //console.log(data);
            $(selector).autocomplete({
                source: data,
                minLength: 0,
            });
        }
    });
}

/* This is only called once when the page is loaded :) 
   Here the URL to the json and the selector are defined.
*/
$(function() {
    var jsonurl = "URL TO CALL";
    var selector = 'YOUR SELECTOR, e.g.: input';
    if ($(selector).is('*')) {
        set_autocomplete(selector, jsonurl);
    }
});

My JSON looks like this (note that what the user types matches the label but the input field will keep what I have in the value) :

[  
   {  
      "value":"46477",
      "label":"46477 - erererer"
   },
   {  
      "value":"46478",
      "label":"46478 - erererere"
   },
   {  
      "value":"46479",
      "label":"46479 - ererererer"
   },
   {  
      "value":"46480",
      "label":"46480 - trhteyretytryteyety"
   }
]

And the CSS (just to keep the drop down box with a fixed width and scroll bar):

.ui-autocomplete { height: 200px; overflow-y: scroll; overflow-x: hidden;}