javascript - 如何将按钮添加到动态表上的 select2 下拉列表

Question

美好的一天!

我正在做一个动态表，你可以添加/删除行，我正在使用 select2 通过 ajax 搜索数据库中的项目并且它目前运行良好，然后我想添加另一个按钮(“添加新项目”)到我的select2的输入框。它也能正常工作，但是当我添加另一行时，前面的行上会有 2 个(添加新项目)按钮，当我添加另一行时，我的输入框会出现一些奇怪的情况。

1. 不添加新行

2. 添加新行后

这是我的代码:

$(document).ready(function() {  
   addRow();
});

添加行.js

var rowCount = document.getElementById('tblItemList').rows.length - 1 ;
var rowArrayId = rowCount ;

function addRow(){
var toBeAdded = document.getElementById('toBeAdded').value;
if (toBeAdded=='')
    { toBeAdded = 2; }
else if(toBeAdded>10)
{
  toBeAdded = 10;
}

  for (var i = 0; i < toBeAdded; i++) {
    var rowToInsert = '';
    rowToInsert = "<tr><td><input id='itemId"+rowArrayId+"' name='product["+rowArrayId+"][name]' class='form-control col-lg-5 itemSearch' type='text' placeholder='select item' /></td>";
    $("#tblItemList tbody").append(
        rowToInsert+
        "<td><textarea readonly name='product["+rowArrayId+"][description]' class='form-control description' rows='1' ></textarea></td>"+
        "<input type='hidden' name='product[" + rowArrayId + "][itemId]' id='itemId'>"+
        "<td><input type='number' min='1' max='9999' name='product["+rowArrayId+"][quantity]' class='qty form-control' required />"+
        "<input id='poItemId' type='hidden' name='product[" + rowArrayId + "][poContentId]'></td>"+
        "<td><input type='number' min='1' step='any' max='9999' name='product["+rowArrayId+"][price]' class='price form-control' required /></td>"+
        "<td class='subtotal'><center><h3>0.00</h3></center></td>"+
        "<input type='hidden' name='product["+rowArrayId+"][delete]' class='hidden-deleted-id'>"+
        "<td class='actions'><a href='#' class='btnRemoveRow btn btn-danger'>x</a></td>"+
        "</tr>");
        
var rowId = "#itemId"+rowArrayId;

$(rowId).select2({
    placeholder: 'Select a product',
    formatResult: productFormatResult,
    formatSelection: productFormatSelection,
    dropdownClass: 'bigdrop',
    escapeMarkup: function(m) { return m; },
    minimumInputLength:1,
    ajax: {
        url: '/api/productSearch',
        dataType: 'json',
        data: function(term, page) {
            return {
                q: term
            };  
        },  
        results: function(data, page) {
            return {results:data};
        }   
    }   
});

rowArrayId = rowArrayId + 1;
     };

$(".select2-drop").append('<table width="100%"><tr><td class="row"><button class="btn btn-block btn-default btn-xs" onClick="modal()">Add new Item</button></div></td></tr></table>');



function productFormatResult(product) {
var html = "<table><tr>";
html += "<td>";
html += product.itemName ;
html += "</td></tr></table>";
return html;
}

function productFormatSelection(product) {
var selected = "<input type='hidden' name='itemId' value='"+product.id+"'/>";
return selected + product.itemName;
}
    $(".qty, .price").bind("keyup change", calculate);
};

请帮我找到这个问题的解决方案，我一直在尝试自己解决这个问题，但我无法让它工作。任何建议、答案和评论都将不胜感激。非常感谢，祝你有美好的一天!

Answer 1

在我的例子中，我只是添加了这个函数

formatNoMatches: function( term ) { 

          $('.select2-input').on('keyup', function(e) {
             if(e.keyCode === 13) 
               {
                $("#modalAdd").modal();          
                $(".select2-input").unbind( "keyup" );
               }
          });

        return "<li class='select2-no-results'>"+"No results found.<button class='btn btn-success pull-right btn-xs' onClick='modal()'>Add New Item</button></li>";
        }