live search ajax multiple input

Question

I have multiple inputs but it dont search if i run it. what did i have to do to fix my issue

$(document).ready(function()
load_data();
    function load_data()
    {
        $('#search_text').keyup(function(){
        var search = $(this).val();
        var second=str3;
        $.ajax({
            url:"search.php",
            method:"post",
            data:{search:search, second:second},
            success:function(data)
            {
                $('#result').html(data);
            }
        });
    }

Answer 1

As per my comment, make sure that each input has the same class name but different ID attribute values. Then call .keyup() using the class name

<input id='search1' class='search_input' />
<input id='search2' class='search_input' />
<input id='search3' class='search_input' />

Then call as:

$('.search_input').keyup(function(){

Answer 2

As @Rotimi recommended you have to use class instead of an id

data:{search:search, second:second},

If you want to compute an object with multiple input values you can use following snippet

 $(document).ready(function() { load_data(); }) function load_data() { $('.search_text').keyup(function() { var data = $('.search_text').map((index, element) => ({ name: $(element).attr("name"), value: $(element).val() })).get().reduce(function(acc, { name, value }) { acc[name] = value; return acc; }, {}) console.log(data) }) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input class="search_text" name="search" type="text" /> <input class="search_text" name="second" type="text" />

Also don't forget to use debounce as you can exhaust your backend with so many requests