动态创建的行自动完成更新行之前

Question

我目前遇到了动态创建的自动完成行的问题。当我输入用户名并选择时，该行添加得很好，第一个自动完成工作。然后我添加另一行并为其分配一个新 ID，然后输入名称，自动完成不会将名称添加到输入框中，但是当我单击名称时它会更新之前的行！

表格

<p><input type='search' id='nameSearch' name='voteNominee[]' placeholder='Search User' />
<a href="#" id="addScnt9">Add Row</a></p>

自动完成脚本

<script>
$(document).ready(function(){

$('#nameSearch').autocomplete({

source:'results.php', 
minLength:1,
select: function(event, ui){

  // just in case you want to see the ID
  var accountVal = ui.item.value;
  console.log(accountVal);

  // now set the label in the textbox
  var accountText = ui.item.label;
  $('#nameSearch').val(accountText);

  // now set the label in the textbox
  var accountText = ui.item.value;
  $('#nameSearchID').val(accountText);

  return false;
},
focus: function( event, ui ) {

  $( "#nameSearch" ).val( ui.item.label );
  return false;  
},  

});

});
</script>

添加动态行

$(window).load(function(){
$(function() {
    var scntDiv = $('#p_scents9');
    var i = $('#p_scents9 p').size() + 1;

    $('#addScnt9').live('click', function() {
            $('<p><input type="search" id="nameSearch_' + i + '" name="voteNominee[]" placeholder="Search User" /><input type="hidden" id="nameSearchID" name="nameSearchID[]"><a href="#" id="remScnt9"><img src="//protus.global/projects/images/minus-icon.png" width="15" style="margin: 0 0 -5px -3px;"/></a></p>').appendTo(scntDiv);


            $('#nameSearch_' + i).autocomplete({
            source:'results.php', 
            minLength: 1,
            select: function(event, ui){

            // now set the label in the textbox
            var accountText = ui.item.label;
            $('#nameSearch').val(accountText);

            return false; 
            },

            i++;
            return false;
    });

    $('#remScnt9').live('click', function() { 
            if( i > 1 ) {
                    $(this).parents('p').remove();
                    i--;
            }
            return false;
    });
});

});

Answer 1

将您的代码更改为以下内容

$(document).ready(function () {

    $('#nameSearch').autocomplete({

        source: 'results.php',
        minLength: 1,
        select: function (event, ui) {

            // just in case you want to see the ID
            var accountVal = ui.item.value;
            console.log(accountVal);

            // now set the label in the textbox
            var accountText = ui.item.label;
            $('#nameSearch').val(accountText);

            // now set the label in the textbox
            var accountText = ui.item.value;
            $('#nameSearchID').val(accountText);

            return false;
        },
        focus: function (event, ui) {

            $("#nameSearch").val(ui.item.label);
            return false;
        },

    });

});

$('#addScnt9').on('click', function () {
    var $new_row = $('<p />');
    var $name_search = $('<input />', {
        'name': 'voteNominee[]',
            'placeholder': 'Search User'
    });
    var $name_search_id = $('<input />', {
        'type': 'hidden',
            'name': 'nameSearchID[]'
    });
    var $remove_button = $('<a />', {
        'href': '#'
    }).append($('<img />', {
        'src': '//protus.global/projects/images/minus-icon.png',
            'width': '15',
            'style': 'margin: 0 0 -5px -3px;'
    }));

    $new_row
        .append($name_search)
        .append($name_search_id)
        .append($remove_button)

    $('#p_scents9').append($new_row);
    $name_search.autocomplete({
        source: 'results.php',
        minLength: 1,
        select: function (event, ui) {
            // now set the label in the textbox
            var accountText = ui.item.label;
            $name_search.val(accountText);
            return false;
        }
    });

    $remove_button.on('click', function () {
        $new_row.remove();
        return false;
    });
});