Jquery autocomplete not working from within a get ajax request

Question

Hello, Im using the JQuery autocomplete plugin (http://docs.jquery.com/Plugins/Autocomplete) .I have an input field called by in my page.The following code works.

<script>
$(document).ready(function(){
    somedata = "Core Selectors Attributes Traversing Manipulation CSS Events Exciting Electronic Effects     Ajax Utilities".split(" ");
$("#by").autocomplete(somedata);
</script>

Now, when the by input field gets focus,i make an ajax get request which correctly fetches the data which consists of some strings seprated by "\n",and i want to populate the by field with the data received.But calling autocomplete from within $.get does not work, as shown below. Any way to fix this ?

$(document).ready(function(){
    somedata = "Core Selectors Attributes Traversing Manipulation CSS Events Exciting Electronic Effects     Ajax Utilities".split(" ");
var url = "<some url here>";
$("#by").focus(function(){
$.get(url,function(result) {
 $("#by").autocomplete(somedata); //Does not work
 $("#by").autocomplete(result.split("\n")); //Does not work
});
});
});

Thank You.

Answer 1

The focus event is too late to load the values of the autocomplete. From the plug-in's description:

By giving an autocompleted field focus or entering something into it, the plugin starts searching for matching entries and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.

So the autocomplete does its job when the focus event is triggered. You are trying to load data to it from the same event. In fact you load the data after the event is called, since the callback of the $.get method is called asynchronously.