Question

我正在使用jQuery Autocomplete plugin。我在表单上有两个输入字段inputfield1和inputfield2。

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

以下是我用来做的代码：

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

        });
    }
});

但是发生了一件奇怪的事情：我能够成功地将自动完成功能附加到第一个字段，但是我必须将焦点重复两次到第二个字段才能在其上使用自动完成功能。有没有办法解决这个问题？

Answer 1

试试这个简化的测试。如果这有用，请检查您的result是否真的包含您的想法（提醒或将其写入控制台）。分裂后可能还有其他字符（即空格（前导空格，\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);
    }
});

Answer 2

确保您使用的是自动填充插件的the latest version。 There was a bug in versions prior to 1.1如果您在该字段具有焦点之后字段上启用了自动填充功能（如果您从第一个输入字段直接键入第二个字段，则会在您的示例中发生），这将无效正确，直到焦点丢失，然后再次恢复......

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

Answer 3

我在当前版本的自动完成插件中找到了这段代码：

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

点击后似乎将重点放在自身上。这可能会搞砸你。

如果你处理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);

        });
    }
});

Answer 4

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

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

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

4 个答案: