jquery - adding autocomplete items to text box

Question

I have 4 text boxes and I need to fill with auto complete. I have created the jsfiddle but not able to get it run as I am submitting to the server to get the data. When i click add button I am able to add to only first line of input boxes but never be able to add to others such as 2, 3 and 4. Could someone take a look? Thanks!

http://jsfiddle.net/qF5jU/2/

        $('[name=addAgent]').bind('click', function() {

            var agent = $('[name=selectAgent]').val();
            var agentID =$("#AgentID").val();
            //alert(agent);

            if(agent == ""){
            $.msgBox({
                title:"Agent Name",
                content:"Please search for an agent to Add!"
                });
            return false;
            }

            if($('#container').find('text').length < 4) {
            alert($('#container').find('text').length);             
           $('#Agent1').val(agent);
           $('#AgentID1').val(agentID);
            $( '[name=selectAgent]' ).val('');      
            }else{
                $.msgBox({
                title:"Agent Name",
                content:"You cannot add more than 4 Agents!"
                });
            }
        })

Answer 1

此行获取具有该名称的第一个框的值：

var agent = $('[name=selectAgent]').val();

如果要获取单击的值，请使用：

var agent = $(this).val();

然后，我不太确定小于 4 部分的作用，但您需要一些代码来决定将新部分放在哪里。这些行：

$('#Agent1').val(agent);
$('#AgentID1').val(agentID);

需要被放入某种循环中，如下所示：

for (var i=1 ; i <= 4 ; ++i) {
    if (...something to decide if this is where you want it ...) {
        $('#Agent' + i).val(agent);
        $('#AgentID' + i).val(agentID);
    }
}

某种“如果”组，像这样：

if (... 1 is it ...) {
    $('#Agent1').val(agent);
    $('#AgentID1').val(agentID);
} else if (... 2 is it ...) {
    $('#Agent2').val(agent);
    $('#AgentID2').val(agentID);
} else if (... 3 is it ...) {
    $('#Agent3').val(agent);
    $('#AgentID3').val(agentID);
} else  if (... 4 is it ...) {
    $('#Agent4').val(agent);
    $('#AgentID4').val(agentID);
}

Answer 2

谢谢李。它工作完美。我想添加 jQuery minusthik 图标并在每个文本框旁边添加它以提供删除文本选项。你认为，我也可以用“-”点击从计数器中减去吗？

var counter = 0;

$('[name=addAgent]').bind('click', function() {
            var agent = $('[name=selectAgent]').val();
            var agentID =$("#AgentID").val();
            //alert(agent);

            if(agent == ""){
                $.msgBox({
                    title:"Agent Name",
                    content:"Please search for an agent to Add!"
                    });
                return false;
            }


              alert(counter);   
                if(counter==1){
                    $('#Agent1').val(agent);
                    $('#AgentID1').val(agentID);                      

                }else if(counter==2){
                        $('#Agent2').val(agent);
                    $('#AgentID2').val(agentID);

                }else if(counter==3){
                        $('#Agent3').val(agent);
                    $('#AgentID3').val(agentID);

                }else if(counter==4){
                    $('#Agent4').val(agent);
                    $('#AgentID4').val(agentID);               

                }else{
                    $.msgBox({
                    title:"Agent Name",
                    content:"You cannot add more than 4 Agents!"
                    });
                }
                 $( '[name=selectAgent]' ).val('');


            counter++;

        });