How to link jQuery UI autocomplete to several input elements?

Question

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.

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>

Mark Coleman · Accepted Answer · 2011-03-01 01:25:42Z

2

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

Slight change..

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

Example of it on jsfiddle.

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.

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

edited Mar 1, 2011 at 1:25

answered Mar 1, 2011 at 0:43

Mark Coleman

40.9k9 gold badges84 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Will Curran Over a year ago

Will that only set the value for the input that currently has focus?

Will Curran Over a year ago

Closer (I added a class to all inputs), but that won't keep the id in sync. So I need to programatically determine that as well.

Mark Coleman Over a year ago

Made a small update that uses $(this).next() to find the closest id field.

Will Curran Over a year ago

That's brilliant. I was trying to dynamically build the input ids but that wasn't working. Thanks!

Will Curran Over a year ago

Oh - I see that you also suggested a way to dynamically build the input ids. Cool.

Collectives™ on Stack Overflow

How to link jQuery UI autocomplete to several input elements?

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related