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

Question

我希望用户能够为n个Facebook朋友添加分数。现在我有了我的表单，有8个输入（我假设最多有8个玩家）。我有jQuery自动完成工作的一个输入（以便用户可以添加Facebook的朋友），但我不知道如何编程为所有8个输入分配自动完成。

更新：基于马克的建议，我选择的类，它允许我自动填充所有文本输入的玩家名称，但我仍然需要把值在每个相关的隐藏输入。 （每一个自动完成的名字里有一个对应的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

您应该能够使用输入[类型=文本]，或分配每个输入框都有一个类。

轻微变化..它上jsfiddle

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

实施例。

然后在您的选择和重点处理程序使用$(this)参考选择的输入框，找到可以使用$(this).next()假设下一个元素匹配到玩家ID的潜在价值。

如果你不想使用一个类的玩家ID，你可以利用你在地方有约定的球员名字找到像下面的ID：

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