jQueryUI autocomplete response data

Question

SCENARIO

I have a jQueryUI autocomplete in a page. The data are retrieved through an AJAX call. Everything is working fine.

Question

As to the jQueryUI API, the source property is a setter.

Is there any autocomplete property exposing the retrieved data?

In other term, if I re-focus the autocomplete bound input and it still contains the previous searched terms, can I show the autocomplete results without re-excuting the ajax call?

I have already searched for similar questions. Thanks to SirDerpington, I succeed in re-opening the result menu. Still, the AJAX call is re-processed.

        $('mySelector').autocomplete().on("focus", function () {
            $(this).autocomplete("search");
        })

So the question remains.

Answer 1

If I understood you right you want to show the same results if the user re-focusses the input?

In my jsfiddle it seems to work but I'm not sure if this would trigger an AJAX Call. Anyway see what I did:

$('#autocomplete').autocomplete({
    source: availableTags,
    minLength: 0
}).focus(function () {
    var $this = $(this);
    var inputVal = $this.val();
    //just a check to prevent showing all results if inputVal is empty
    if (inputVal !== '') {
        $this.autocomplete("search");
    }
});

Notice what the docs say about search as method:

When invoked with no parameters, the current input's value is used.

EDIT

Using a sort of "cache" seems to be a good way to solve your issue. Because I can not really use a source I just used jsfiddle's /echo/json/ and set the cache to the whole source (availableTags). But imagine you have a real request and save the response. It would work fine when using a real source. (the alert doesn't popup when the results are cached and the input doesn't change)

updated fiddle

Updated Code

var cache = {};
$('#autocomplete').autocomplete({
    source: function (request, response) {
        var term = request.term;
        //check if searched input is in cache and return it as response
        if (term in cache) {
            response(cache[term]);
            return;
        }

        $.getJSON("/echo/json/", request, function (data, status, xhr) {
            alert("Request triggered!");
            //write response in cache
            cache[term] = availableTags;
            response(availableTags);
        });
    },
    minLength: 0
}).focus(function () {
    var $this = $(this);
    var inputVal = $this.val();
    if (inputVal !== '') {
        $this.autocomplete("search");
    }
});

Also mentioned in the comments but here again: Documentation Entry

Answer 2

I usually populate my text field autocomplete data with a javascript Array object. So on page load, that text field will always have just the specified text for autocomplete. Something like:

var contentArray = ["John", "Doe"];
$("#textfieldid").autocomplete({
   source: contentArray

Sorry if I misunderstood your question, but I want to help if I can.