use dynamic INPUT to query the bank

Question

use dynamic INPUT to query the bank

Navigation

#1 by (0 votes)

0

I have this script in html and jquery that searches the database for what the user wrote in the input

<div class="form-group col-md-8" id="dynamicDiv1" >
     <label for="categoria">Categoria</label>
     <input type="search" name="categoria[]" autocomplete="off" class="form-control" id="busca" placeholder="Buscar por categoria">                          
     <div class="col-md-12 rm_padding">
          <ul class="list-group">
          </ul>
     </div>
</div>

and shows what comes from the database in this section

<div class="col-md-12 rm_padding">
      <ul class="list-group">
      </ul>
</div>

//Busca categoria dinamicamente
$(function () {
    $('#busca').keyup(function () {

        var pesquisa = $(this).val();
        $.post('pesquisa.php', {categoria: pesquisa}, function (r) {
            $('.list-group').html(r);
        });
    });

    $('.list-group').delegate('li', 'click', function () {

        var texto = $(this).text();
        $('#busca').val(texto);
        $('.list-group').html('');

    });

    $('body').click(function (event) {
        if (event.target.id !== 'busca') {
            $('.list-group').html('');
        }
    });
});

My problem is the input in which the user types it is dynamic ie a field always appears mandatory but it can add 3 more fields

script to add fields

var contador = 0;
var limite = 3;

$(function () {
    var scntDiv = $('#dynamicDiv1');

    $(document).on('click', '#addInput1', function () {
        if (contador < limite) {
            $('<div id="dinamic">' +
                    '<input type="search" id="busca" required="" name="categoria[]" class="form-control" placeholder="Adicionar Categoria" /> ' +                     
                    '<div class="col-md-12 rm_padding"><ul class="list-group"></ul></div>'+
                    '<br><a class="btn btn-danger btn-sm left" href="javascript:void(0)" id="remInput">' +
                    '<span class="glyphicon glyphicon-minus " aria-hidden="true"></span> ' +
                    'Remover Categoria' +
                    '</a>' +
                    '</div>').appendTo(scntDiv);
            contador++; // incremento do contador
        }
        return false;
    });

    $(document).on('click', '#remInput', function () {
        $('#dinamic').remove();
        if (contador > 0)
            contador--; // remover do contador tb
        return false;
    });
});

How do I make dynamic search work in these dynamically created fields as well.

html jquery

asked by anonymous 15.02.2017 / 04:25

1 answer

How to get all ips associated with some domain with Python? jQuery SlideToggle - Detect open / closed

score 0 · Accepted Answer

JQUERY DELEGATE

jQuery assigns an event to the item when called, that is, if when jQuery was executed the item still did not exist, it would be impossible to attach the keyup function to it.

However, using the delegate function, the parent element is the one that will assign the child elements the desired function, whenever a new element is created:

$('button').click(function(){
  $('body').append("<p><input></p>");
});

$('body').delegate('input', 'keyup', function(){ // body é o Elemento pai de input
  alert($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><body><button>Adicionar</button></body>

InyourSEARCHfunctionitchangesasfollows:

//Buscacategoriadinamicamente$(function(){varbuscaAtual=$("#busca");
    $('body').delegate('#busca', 'keyup', function(){

        var pesquisa = $(this).val();
        buscaAtual = $(this);
        $.post('pesquisa.php', {categoria: pesquisa}, function (r) {
            $('.list-group').html(r);
        });
    });

    $('.list-group').delegate('li', 'click', function () {

        var texto = $(this).text();
        buscaAtual.val(texto);
        $('.list-group').html('');

    });

    $('body').click(function (event) {
        if (event.target.id !== 'busca') {
            $('.list-group').html('');
        }
    });
});

SOURCE