如何将jQuery UI自动完成链接到几个输入元素? [英] How to link jQuery UI autocomplete to several input elements?

问题描述

我希望用户能够为n个Facebook朋友添加分数.我现在设置表单的方式有8个输入(我假设最多8个玩家).我有jQuery自动完成功能可用于一个输入(以便用户可以添加Facebook朋友)，但是我不知道如何以编程方式将自动完成功能分配给所有8个输入.

I want a User to be able to add scores for n Facebook friends. The way I have my form set up now, there are 8 inputs (I assume a maximum of 8 players). I have jQuery autocomplete working for one input (so that a User can add a Facebook friend), but I cannot figure out how to programatically assign autocomplete to all 8 inputs.

更新:基于Mark的建议，我正在按班级进行选择，这使我可以自动完成球员姓名的所有文本输入，但是我仍然需要将该值放入每个关联的隐藏输入中. (对于每个自动完成的名称，都有一个对应的ID)

UPDATE: based on Mark's suggestion I am selecting by class, which allows me to autocomplete on all text inputs for the player names, but I still need to put the value in each associated hidden input. (for every auto-completed name there is a corresponding 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>

推荐答案

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

You should be able to use input[type=text], or assign a class to each input box.

稍有变化.

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匹配.

And then in your select and focus handler use $(this) to reference the input box selected, and to find the hidden value you can use $(this).next() assuming the next element is matched to the player id.

如果您不想为播放器ID使用一个类，则可以使用已有的约定来命名播放器名称，如下所示:

If you do not want to use a class for the player-id you could use the convention you have in place for the player names to find the id like the following:

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

这篇关于如何将jQuery UI自动完成链接到几个输入元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！