Question

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

FORM

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

AUTOCOMPLETE SCRIPT

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

添加DYNAMIC ROW

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

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

1 个答案: