如何为链接的输入字段使用jQuery Autocomplete插件？

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

我正在使用jQuery Autocomplete插件。我在表单上有两个输入字段inputfield1和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.

我将自动完成功能附加到第一个字段。当该字段失去焦点时,我想检查是否输入了值,如果是,则进行AJAX调用以检索一些“\ n”分隔的字符串并使用它们来驱动第二个字段上的自动完成。

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?

但是发生了一件奇怪的事情:我能够成功地将自动完成功能附加到第一个字段,但是我必须将焦点重复两次到第二个字段才能在其上使用自动完成功能。有什么方法可以解决这个问题吗?

4 个解决方案

#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.

试试这个简化的测试。如果这有效,请检查您的结果是否真的包含您的想法(提醒或将其写入控制台)。分割后可能还有其他字符(即空格(前导空格,\ t或\ r)尝试修剪结果数组的每个值。

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);
    }
});

#2

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

我在当前版本的autocomplete插件中找到了这段代码:

.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.

如果你处理autocomplete插件的result()事件,你可能会有更好的运气,而不是处理blur()事件。

/*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);

        });
    }
});

#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...

确保您使用的是最新版本的自动完成插件。在1.1之前的版本中存在一个错误,如果在该字段具有焦点之后在某个字段上启用了自动完成(如果您从第一个输入字段直接键入到第二个中,则在您的示例中会发生这种情况)在焦点之前它将无法正常工作丢了然后又恢复了......

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

这是一个快速演示,显示此构造使用最新的自动完成版本。

#4

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)?

你说你需要选择#inputfield2两次,所以autocomplete事件会绑定它,对吧?我只是在想......你是否有可能使用键盘上的tab键来选择#inputfield2,当这不起作用你用鼠标选择#inputfield2?如果是这样,在用鼠标“取消选择”它之前,#inputfield1模糊事件是否可能没有启动(可能是某种错误)?

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

我没试过这个,这只是一个想法。