use dynamic INPUT for database query

Question

use dynamic INPUT for database query

Asked 7 years, 9 months ago

Viewed 455 times

0

I have this script in html and jquery searching in the database 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 type it is dynamic or a field always appears as required 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 for dynamic research to also work in those fields that are created dynamically.

1 answer

Browser other questions tagged jquery html

You are not signed in. Login or sign up in order to post.

by Thiago Santos • **1,957** points · Answer 1 · 2017-02-15T09:52:00+00:00

JQUERY DELEGATE

jQuery assigns an event to the item when called, i.e., if when jQuery was executed the item did not yet exist, it would be impossible to attach the function keyup to him.

However, using the delegate, the parent element is the one who 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>

In your SEARCH function changes as follows:

//Busca categoria dinamicamente
$(function () {
var buscaAtual = $("#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