如何将 jQuery Autocomplete 插件用于链接输入字段？答案

【问题标题】：How can I use the jQuery Autocomplete plugin for linked input fields?如何将 jQuery Autocomplete 插件用于链接输入字段？
【发布时间】：2010-12-22 17:37:48
【问题描述】：

我正在使用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);

        });
    }
});

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

【问题讨论】：

这方面有什么进展吗？我的回答有帮助吗？能不能给个意见
你知道自动完成插件是否会在每次模糊时不断地重新绑定自己在#inputfield2 上？（请注意，该插件可能足够聪明，可以知道；我只是不熟悉此插件，无法知道足够聪明...）
嗯？ johnswr，您根本没有提供任何反馈。怎么了？

标签： javascript jquery ajax autocomplete

【解决方案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);
    }
});

【讨论】：

【解决方案2】：

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

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

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

如果你处理自动完成插件的 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】：

确保您使用的是自动完成插件的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.

【讨论】：

【解决方案4】：

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

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

【讨论】：