How can I use the jQuery Autocomplete plugin for linked input fields?

Question

I'm using the jQuery Autocomplete plugin. I have two input fields on a form, inputfield1 and inputfield2.

I attached autocomplete to the first field. When the that field loses focus, I want to check if a value was entered and if so, then make an AJAX call to retrieve some "\n"-separated strings and use them to drive autocomplete on the second field.

Below is the code I'm using to do that:

/*Receive data from server for autocomplete*/
$("#inputfield1").autocomplete("<url1>"); 

$("#inputfield1").blur(function(){

    // Attach autocomplete if inputfield1 field is not empty
    if($("#inputfield1").val() != ""){
     var url = "<url2>?q="+$("#inputfield1").val();
     $.get(url,function(data){
      result=data.split("\n");
      $("#inputfield2").autocomplete(result);

     });
    }
});

But a strange thing is happening: I am able to attach autocomplete to the first field successfully, but I have to give focus twice to the second field in order to use autocomplete on it. Is there any way to fix this problem?

Answer 1

Try this simplified test. If this works check if your result really contains what you think (alert it or write it to console). There could be other characters after splitting (namely whitespace (leading spaces, \t or \r) try trimming every value of the result array.

var data1 = ["a123", "b123", "c123", "d123", "e123", "f123", "g123", "h123", "i123", "j123",   "k123", "l123", "m123", "n123", "o123", "p123", "q123", "r123", "s123", "t123", "u123", "v123", "w123", "x123", "y123", "z123"];
var data2 = 'a123\nb123\nc123\nd123\ne123\nf123\ng123\nh123\ni123\nj123\nk123\nl123\nm123\nn123\no123\np123\nq123\nr123\ns123\nt123\nu123\nv123\nw123\nx123\ny123\nz123';
$("#inputfield1").autocomplete(data1);

$("#inputfield1").blur(function(){
    if($("#inputfield1").val() != ""){
        var result=data2.split("\n");
        $("#inputfield2").autocomplete(result);
    }
});

Answer 2

You say you need to select #inputfield2 twice so the autocomplete event binds to it, right? I'm just thinking.. can it be possible that you are using your tab key on your keyboard to select #inputfield2 and when that doesn't work you select #inputfield2 with your mouse? If so, isn't it possible that the #inputfield1 blur event doesn't kick in until you "unselect" it with your mouse (maybe some kind of bug)?

I haven't tried this, it's just a thought.

Answer 3

Make sure you're using the latest version of the Autocomplete plugin. There was a bug in versions prior to 1.1 where if you enabled autocomplete on a field after that field had focus (as would happen in your example if you tabbed from the first input field directly into the second) it wouldn't work properly until focus was lost and then restored again...

Here's a quick demo that shows this construct working with the latest Autocomplete version.

Answer 4

I found this code in the current version of the autocomplete plugin:

.click(function(event) {
    $(target(event)).addClass(CLASSES.ACTIVE);
    select();
    // TODO provide option to avoid setting focus again after selection? useful for cleanup-on-focus
    input.focus();
    return false;

It seems to put focus back on itself after a click. This might be messing you up.

Instead of handling the blur() event, maybe you'll have better luck if you handle the autocomplete plugin's result() event.

/*Receive data from server for autocomplete*/
$("#inputfield1").autocomplete("<url1>"); 

$("#inputfield1").result(function(event, data, formatted){

    // Attach autocomplete if inputfield1 field is not empty
    if(data){
        var url = "<url2>?q="+data;
        $.get(url,function(data1){
                result=data1.split("\n");
                $("#inputfield2").autocomplete(result);

        });
    }
});