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

您应该能够使用输入[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匹配。< / p>

如果您不想使用播放器ID的类，您可以使用您已有的惯例为播放器名称找到如下所示的ID：

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

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

1 个答案: