Question posted in
You can find the official documentation here.

use multiple $(function() with ajax live search – Jquery ajax

I created a live search. When i open up the page i want to run $(function() {. This run the ajax once and all the output shown up. But i want that it is also updating the page when i type in the searchbox(thats why i used this $('#search').keyup(function(){). AND i want that it update the page also when i press one of the checkboxes which add some other values to the livesearch($('.btn').click(function(){)


$(document).ready(function(){
$(function() {
$('#search').keyup(function(){
   var search = $(this).val();
   console.log("Input: " + search);
$('.btn').click(function(){
   let val1 = getval1();
   let val2 = getval2();
   let val3 = getval3();
   let val4 = getval4();
   console.log(val1 + val2 + val3 + val4)
$.ajax({
    url:"search.php",
    method:"post",
    data:{
       search:search,
       val1:val1,
       val2:val2,
       val3:val3,
       val4:val4,
       },
       success:function(data){
          $('#output').html(data);
       }
});
});
});
});
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 
    <script type="text/javascript">
search_data()
$(document).ready(function(){
$('#search').keyup(function(){
    search_data()
});
$('.btn').click(function(){
    search_data()
});
});
function search_data(query){
    var search = $('#search').val();
    let val1 = getval1();
    let val2 = getval2();
    let val3 = getval3();
    let val4 = getval4();
    $.ajax({
        url:"search.php",
        method:"post",
        data:{
            query:query,
            search:search,
            val1:val1,
            val2:val2,
            val3:val3,
            val4:val4,
        },
        success:function(data){
            $('#output').html(data);
        }
    });
}
</script>

  2. 0 
    $(document).ready(function(){
//page completed loading
    $('#search').keyup(function(){
    //user typed something 
        var search = $(this).val();
        let val1 = getval1();
        let val2 = getval2();
        let val3 = getval3();
        let val4 = getval4();
        //let's retrieve values
        $.ajax({
            url:"search.php",
            method:"post",
            data:{
                query:query,
                search:search,
                val1:val1,
                val2:val2,
                val3:val3,
                val4:val4
            },
            success:function(data){
                $('#output').html(data);
            }
        });
    });

    That is enough. You don’t even need to use click event since it will fire on each type. Otherwise you can use the click instead of the keyup and it will fire on button click.
    Each time you will type something into #search, you will check the value of the other fields too. I’m curious to see what is inside each getval fucntion beacuse probably they can be replaced by something simpler (btw no need for four different functions imho)

    Note: $(document).ready(){}; is used to tell the browser to wait the full page to be loaded before executing the code. You will have one of these only in your page with all the js inside. The functions you define (like when you do

    function getval1(){
//your function here
}

    don’t need to be inside the document ready statement

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search