如何将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

您应该能够使用inputtype=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);