如何将 jQuery UI 自动完成链接到几个输入元素？

Question

我希望用户能够为 n 个 Facebook 朋友添加分数。我现在设置表单的方式有 8 个输入（我假设最多 8 个玩家）。我有一个输入的 jQuery 自动完成功能（以便用户可以添加 Facebook 朋友），但我无法弄清楚如何以编程方式将自动完成分配给所有 8 个输入。

更新：根据 Mark 的建议，我按类选择，这允许我自动完成玩家姓名的所有文本输入，但我仍然需要将值放入每个关联的隐藏输入中。 （每一个自动完成的名字都有一个对应的id）

jQuery:

    <script type="text/javascript">
        $(function() {  
            var friends = {{friends}};
            $(".player-name").autocomplete({
                minLength:0,
                source: friends,
                focus: function(event, ui) {
                    $("this").val(ui.item.label);
                    return false;
                },
                select: function(event, ui) {
                    $("this").val(ui.item.label);
                    //need to assign the appropriate value along with this name
                    $("#player-1-id").val(ui.item.value);                   
                    return false;
                }
            })
            .data("autocomplete")._renderItem = function( ul, item ) {
                return $( "<li></li>" )
                    .data("item.autocomplete", item)
                    .append("<a>" + item.label + "</a>")
                    .appendTo(ul);
            };
        });
    </script>

HTML：

<form name="input" id="game-log-form" action="">
<fieldset>
<label>Player 1</label>
<input type="text" id="player-1-name" class="player-name" value="" />
<input type="hidden" id="player-1-id" value="" />
<label>Score</label>
<input type="text" size="6" id="points-1" /><br/>
<label>Player 2</label>
<input id="player-2-name" />
<input type="hidden" id="player-2-id" class="player-name" value="" />
<label>Score</label>
<input type="text" size="6" id="points-2" /><br/>               
<label>Player 3</label>
<input type="text" id="player-3-name" class="player-name" />
<input type="hidden" id="player-3-id" value="" />                   
<label>Score</label>
<input type="text" size="6" id="points-3"/><br/>                    
<label>Player 4</label>
<input type="text" id="player-4-name" class="player-name" />
<input type="hidden" id="player-4-id" value="" />                   
<label>Score</label>
<input type="text" size="6" id="points-4" /><br/>               
</fieldset>                 
</form>

Answer 1

您应该能够使用 input[type=text]，或者为每个输入框分配一个类。

略有变化..

var friends = [{id:1, "label": "jon", value:24}]
$(".name").autocomplete({
    minLength: 0,
    source: friends,
    focus: function(event, ui) {
        $(this).val(ui.item.label);
        return false;
    },
    select: function(event, ui) {
        $(this).val(ui.item.label);
        $(this).next(".playerId").val(ui.item.value);
        return false;
    }
}).data("autocomplete")._renderItem = function(ul, item) {
    return $("<li></li>").data("item.autocomplete", item).append("<a>" + item.label + "</a>").appendTo(ul);
};

jsfiddle 上的示例。

然后在您的选择和焦点处理程序中使用$(this) 来引用选定的输入框，并找到隐藏的值，您可以使用$(this).next() 假设下一个元素与玩家ID 匹配。

如果您不想为 player-id 使用类，您可以使用为玩家名称制定的约定来查找 id，如下所示：

$("#" + $(this).attr("id").replace("-name", "-id")).val(ui.item.value);