JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ivaynberg.github.io/select2/select2-3.5.0/select2.js"></script>
<link rel="stylesheet" href="http://ivaynberg.github.io/select2/select2-3.5.0/select2.css">
<table id="tabela_publicacoes" class="table table-hover">
<thead>
<tr>
<th>Item</th>
<th>Título</th>
<th>Código</th>
<th>Valor Unitário</th>
<th>Quantidade Disponível</th>
</tr>
</thead>
<tbody></tbody>
</table>
<a href="javascript:void(0);" id="adicionar_item"><button class="btn btn-md btn-success btn-next">Adicionar Item</button></a>
<a href="javascript:void(0);" id="anc_rem"><button class="btn btn-md btn-danger btn-next">Remover Item</button></a>
JavaScript
$(function () {
var cnt = 0;
var quantidadedisponivel;
function change(el) {
var data = $(el.target).select2('data');
var quantidade = data.quantidadedisponivel;
var input = $(el.target).closest('tr').find('input').last().val(quantidade);
}
$("#adicionar_item").click(function () {
$('#tabela_publicacoes tr').last().after('<tr><td>#' + cnt + '</td><td><input type="hidden" name="titulopublicacao' + cnt + '" id="titulopublicacao' + cnt + '" style="width: 600px;"></td><td><input class="form-control" name="cod_publicacao' + cnt + '" type="text" disabled="disabled"></td><td><input class="form-control" disabled="disabled" name="valorunitario' + cnt + '" type="text" value=""></td><td><input class="form-control" name="quantidadedisponivel' + cnt + '" id="quantidadedisponivel' + cnt + '" type="text" disabled="disabled" value=""></td></tr>');
$('#titulopublicacao' + cnt).select2({
placeholder: "Digite o título da Publicacao",
ajax: {
url: '/echo/json/', //'autosuggest_busca_publicacao.php',
dataType: 'json',
quietMillis: 50,
data: function (term) {
return {
term: term
};
},
results: function (data) {
var results = [];
$.each(data, function (index, item) {
results.push({
text: item.titulopublicacao + " - Número: " + item.numero + " - Ano: " + item.ano,
id: item.cod_publicacao,
quantidadedisponivel: item.quantidadedisponivel
});
});
return { // só para exemplo
results: [{
text: 'foo',
id: 20,
quantidadedisponivel: 40
...