Changing the source of an autocomplete widget

Question

I have a strange problem with a jquery autocomplete widget. First I have a 'select' HTML element which displays all the projects. I also have an input element in which I can search for questionnaires which correspond to the selected project.

So I have this code : http://jsfiddle.net/AMkKX/1/

Everything works great. But my problem is when I refresh the page (with F5, not Ctrl+F5) : the previous choice of the select box is always selected so I want to change the source of the autocomplete widget (the code I show you should do that)

But the source doesn't change unless I put an alert before $('#search-questionnaire').autocomplete('option', 'source', data); :

$('#search-project').change(function () {
    var data;
    var val = $(this).val();

    alert('val : ' + val);

    if (val != '')
        data = questionnairesData[val];
    else
        data = allQuestionnairesData;

    $('#search-questionnaire').autocomplete('option', 'source', data);
});

So I don't understand. Is it a bug ?

EDIT : I can't show you the 'F5 refresh' thing with jsfiddle. If you want to test it you have to copy the code and use it in your navigator.

Does this question help: http://stackoverflow.com/q/1479233/497356? — Andrew Whitaker, Jun 01 '11 at 21:29

score 0 · Answer 1 · answered Aug 01 '11 at 12:35

I haven't tested your code, but from the looks of it, this is a timing issue. I encountered this in Javascript a couple of times. To solve this, try using a setTimeout of 0ms:

Instead of

$('#search-questionnaire').autocomplete('option', 'source', data);

Try:

setTimeout(function() {
    $('#search-questionnaire').autocomplete('option', 'source', data);
}, 0)

Let me know how this goes.

Changing the source of an autocomplete widget

1 Answers1