'refresh only div on form submit

I have a form:

<form method="get" action="/category/news/?newsSearch=" id="searchForm">
<input id="newsSearch" type="text" name="newsSearch" placeholder="Напишіть щось">
</form>

And I want to not refresh all page and just change this div

            <div class="news" id="newsList">
                <?php
                global $post;
                $postslist = get_posts( array( 'posts_per_page' => 200, 'category'=>'news' ) );
                foreach ( $postslist as $post ){
                    setup_postdata($post);
                    ?>
                    <div class="bl">
                        <div class="date">
                            <?php the_date(); ?>
                        </div>
                        <div class="tik">
                           <?php the_field('tiker'); ?>
                        </div>
                        <div class="price">
                            <?php the_field('price'); ?>
                        </div>
                        <div class="nnw">
                            <h5>
                                <a onclick="$('.hrs<?php the_ID(); ?>').slideToggle('slow');"><?php the_title(); ?> </a>
                            </h5>
                            <div class="src hrs<?php the_ID(); ?>">
                                <?php the_content(); ?>
                                <a href="<?php the_field('link'); ?>"><?php the_field('link'); ?></a>
                            </div>
                        </div>

                        <div class="site">
                            <a href="<?php the_field('istochnik'); ?>" target="_blank">Сайт</a>
                        </div>


                    </div>
                    <?php
                }
                wp_reset_postdata();  ?>
            </div>

I find that solution Want to refresh a div after submit the form? but it didn't change anything (no console errors).

This is my variation of this script:

 // Attach a submit handler to the form
   $( "#searchForm" ).submit(function( event ) {

 // Stop form from submitting normally
   event.preventDefault();

 // Get some values from elements on the page:
    var $form = $( this ),
    term = $form.find( "input[name='newsSearch']" ).val(),
    url = $form.attr( "action" );

 // Send the data using post
    var posting = $.post( url, { s: term } );

 // Put the results in a div
    posting.done(function( data ) {
    var content = $( data ).find( "#content" );
    $( "#newsList" ).empty().append( content );
    });
 });

Form is changing URL to .../?newsSearch='query'and js is hiding posts that doesn't have query in their titles.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source